I'm using Twitter Bootstrap to build a website, and I want to have an image appear as grayscale until I hover over it, at which point it should become full color.
Instead of editing the Bootstrap.css, I created my own custom css: 'starter-template.css'.
Here's the code in 'starter-template.css':
.thumbnail2 {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
And here's the html:
<!-- Custom styles for this template -->
<link href="static/starter-template.css" type = "text/css" rel="stylesheet">
....
<a href="{{my_link}}"><img class = "thumbnail2" src="{{my_string}}" align="right" height = "200" width = "200"></a>
However, there is no hover effect--the image appears as full color when the page loads and doesn't change when I hover over it. Any suggestions?
Thanks!
Think fixing your z-index is all you need: http://jsfiddle.net/c8wtbjfw/
.thumbnail2 {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
Seems to work when I test it in Chrome (36.0.1985.143). Since that's a Webkit filter, it won't work in IE or Gecko-based browsers.
An alternative might be to transition the opacity rule, since that has better support. Here's the same CSS, but with opacity instead: http://jsfiddle.net/c8wtbjfw/1/
.thumbnail2 {
opacity: .5;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
opacity:1;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
I did remove your z-index, since I'm not sure what you're trying to accomplish by pushing the image "under" the rest of the page.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments