I am using the Pinterest style grid layout for Podcast Gallery and Zero Dollar Movies. When you hover your mouse over any image thumbnail, it fades with a slow transition and goes back to its original state as soon you move the mouse out.
Internally, the fade-in on mouse-over effect is achieved by changing the opacity parameter of the image which the slow speed is achieve using CSS3 transitions. Here’s the code:
Internally, the fade-in on mouse-over effect is achieved by changing the opacity parameter of the image which the slow speed is achieve using CSS3 transitions. Here’s the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <img src="image.png" class="thumbnails" /> <style> .thumbnails { -o-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -webkit-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } </style> <script> $('img.thumbnails').hover( function(){ $(this).css('opacity', '0.7'); }, function(){ $(this).css('opacity', '1'); } ); </script> |
No comments:
Post a Comment