I've been working on a website using Twitter Bootstrap and I wanted to add an interesting dynamic where an image starts off as grayscale and then transitions to full color when hovered over.
Instead of modifying the Bootstrap.css, I decided to create my own custom CSS file called 'starter-template.css'.
Below is the code snippet from '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;
}
Here's the corresponding 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, I'm facing an issue where the hover effect doesn't seem to work as intended – the image isn't transitioning to full color on hover. Any advice or suggestions would be greatly appreciated!
Thanks in advance!