Thumbnails of photos is very common part of any website. We have seen a lot of innovation and beautiful representation of thumbnails. Recently I came across a beautiful hover effect on thumbnails. Without saying much first see what is this effect.
The Implementation of this effect is given in the following sections.
The HTML
<div class="thumbnail-wrap"> <div class="thumbnail-div"> <div style="background-image: url(5_thumb.jpg);"> <img class="thumbnail-shadow" src="thumbnail-shadow.png" alt="bottom" /> <div class="sections-overlay"> <a rel="imagezoom" href="5.jpg"> <img class="zoom" src="zoom.png" alt="Some Title of the Image 5" /> </a> <a class="readmore" href="#">read more >></a></div> </div> </div> </div>
I think the code here is self explanatory.
The CSS
The CSS for the effect is a bit lengthy, as lots of hidden elements are involved.
.thumbnail-wrap { float:left; height:151px; margin:30px; width:151px; } .thumbnail-div { background-color:#313131; float:left; height:146px; padding:5px 0 0 5px; width:146px; } .thumbnail-shadow { float:left; height:33px; width:100%; } .thumbnail-div .sections-overlay { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(thumbnail-overlay.png) no-repeat scroll -40px -300px; float:left; margin-top:-33px; } .thumbnail-div div{ height:141px; width:141px; } .sections-overlay { background-image:url(readmore-bg.png); opacity: 0; visibility:hidden; background-position: 0px -167px; } .thumbnail-div .sections-overlay .zoom { margin:60px 0 0 61px; } .sections-overlay .zoom { border:medium none; margin:165px 0 0 312px; } .readmore { background-image:url(readmore-bg.png); color:#FFFFFF; display:block; float:right; font-size:10px; margin:17px 0 0 40px; padding:5px 10px; }
The Javascript : Mootools
And Finally the magic of Mootools to get the desired effect. All this effect is doing to decrease the margin-top of "thumbnail-div" by 10px and showing "sections-overlay" div using opacity:1.
$$('div.thumbnail-div').each(function(div){ div.addEvents({ 'mouseover': function(){ $(this).tween('marginTop', '-10px'); $(this).getElements('div.sections-overlay').each(function(d){ d.morph({opacity: 1, backgroundPosition: "-40px 0px"}); }); }, 'mouseout': function(){ $(this).tween('marginTop', '0px'); $(this).getElements('div.sections-overlay').each(function(d){ d.morph({opacity: 0, backgroundPosition: "0px -167px"}); }); } }); });
Doing just this we'll get such an amazing effect on Thumbnails. This effect is just a demo of the possibilities. One can use the same technique to show the Title of the Image or RunTime and Title of Video Thumbnail.
The whole code is available for download :
Hope you guys will like it. Let me hear new implementation through comments.
Very, very nice! Although, you might want to change mouseover/mouseout to mouseenter/mouseleave– otherwise the animation gets choppy when moving the cursor around! Proof: http://mooshell.net/bz9RB/
Thanks for the suggestion…. Actually I wasn’t aware of mouseenter/leave, thanks for telling..
yeah yeah very nice effect!
Hi Nitin, The code is simple but the result is really nice. i like it.
I love it, its very beautiful, except for the fact that they raise up too. It kind of moves them away from the mouse, and it doesn’t seem very good for usability.
Nice tutorial, Mootools is also awesome and can do what jQuery can.
As said by @Oskar Mootools provide far more stuff than jquery. For more info you can see http://jqueryvsmootools.com/
Acutally @Phaoloo, MooTools can do WAY more than jQ will ever be able to do. But, you know, these are just semantics…
Hey bud! Its awesome Mootools tutorial. i have added into archive
Its awesome..!
[...] Beautiful Thumbnail Hover Effect : Using Mootools | The Code Dreamer (tags: mootools javascript gallery design) [...]
[...] very often a part of any Web site. We have seen a lot of innovation and fair presentation of the thumbnail images. Nitin Hayaran recently shown how to create a rollover effect MooTools beautiful [...]
Very nice, I have never used mootools before is it very easy to use? Ive seen a couple of examples of great things you can do with moo, does anyone know a site that I can get mootools tutorials from?
You can check mootools tutorials @ http://www.mootorial.com/wiki/
[...] Beautiful Thumbnail Effect is just a demo of the possibilities. One can use the same technique to show the Title of the Image or RunTime and Title of Video Thumbnail. [...]
[...] Beautiful Thumbnail Effect is just a demo of the possibilities. One can use the same technique to show the Title of the Image or RunTime and Title of Video Thumbnail. [...]
[...] size: "large", google_analytics: "true" } Some days back I wrote a post regarding "Beautiful Thumbnail Hover Effect". On getting such a good response about the javascript effect I am again presenting a different [...]
I was wondering if this is achievable using mootoools 1.1 as well? (stuck with it unfortunately on joomla) but this effect is what i always needed!
[...] 2. Beautiful Thumbnail Hover Effect : Using Mootools [...]
Very beautiful, thanks!
Very beautiful, thanks!
[...] Beautiful Thumbnail Effect is just a demo of the possibilities. One can use the same technique to show the Title of the Image or RunTime and Title of Video Thumbnail. [...]
this is awesome, thank you!!!
[...] Tutorial | Demo [...]
very useful plugin!
thanks!
this is good, thank you
Nice job Nitin. Wish U good luck… : )