Beautiful Thumbnail Hover Effect : Using Mootools

Thumbnail Effect 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.

View Demo

Thumbnail Effect

The Implementation of this effect is given in the following sections.

The HTML






   bottom


    
     Some Title of the Image 5
    
    read more >>

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 :

Download Thumbnail.zip

Hope you guys will like it. Let me hear new implementation through comments.

Also read...

54 Responses

  1. Oskar Krawczyk #

    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/

    Reply
    • nitin #

      Thanks for the suggestion…. Actually I wasn’t aware of mouseenter/leave, thanks for telling..

      Reply
  3. cevarief #

    Hi Nitin, The code is simple but the result is really nice. i like it.

    Reply
  4. Navarr #

    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.

    Reply
  5. Phaoloo #

    Nice tutorial, Mootools is also awesome and can do what jQuery can.

    Reply
  6. Oskar Krawczyk #

    Acutally @Phaoloo, MooTools can do WAY more than jQ will ever be able to do. But, you know, these are just semantics…

    Reply
  7. Salih Gedik #

    Hey bud! Its awesome Mootools tutorial. i have added into archive

    Reply
    • rabab #

      it works fine but stop working when i used on page where already other scripts and jQ are running. any solution

      Reply
      • nitin #

        In that case you’ll have to run jQuery in noConflict mode, or re-write this script for jQuery

    • rabab #

      when i use this with jquery it does work

      Reply
  8. Raju #

    Its awesome..! :)

    Reply
  11. rory #

    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?

    Reply
  15. Alex #

    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!

    Reply
  17. Elena #

    Very beautiful, thanks!

    Reply
  18. Elena #

    Very beautiful, thanks!

    Reply
  20. john #

    this is awesome, thank you!!!

    Reply
  25. Website Developer #

    thanx nitin for this great plugin and @wave_ on twitter for tweeting this resource. want more great resources like this…

    Reply
  27. Oleg #

    Thanks so much for the tutorial…Astonishing effect)

    Reply
  28. raj #

    this is good hover effect

    Reply
  29. Constantine #

    Hi awesome work. One question. How to fix the broken image icon before the lightbox loads? Thanks in advance

    Reply
    • Constantine #

      Ok! I fixed that

      Reply
      • thushi #

        May I know how you fix it? I’m also getting that broken image

  30. Mike #

    great, very nice effect, i added to my test site but ….

    stop working when i used on page where already other scripts and jQery are running.

    I used the code jQuery.noConflict(); but nothing

    any suggestion pls??

    Best regards

    Reply
    • nitin #

      you’ll have to make necessary changes in this script, to make it run in noConflict.

      Reply
  31. Mike #

    thnx for your response I’ve made some change

    Reply
  33. Igor Fernandes #

    Hi,

    Do you can update this script for mootools 1.4?
    Thnks a lot!

    Cya

    Reply
  34. Tom #

    Hi,

    I try to use this great effect on my website but I have a conflict with jquery roundabout script (http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html).
    When I use only yours, it work fine. When I use yours and roundabout together, roundabout jquery doesn’t work.

    Have you got any idea?

    Excuse my bad english.

    Best Regards

    Reply
  35. Neha Parmar #

    Hi there, my gallery with this jquery is looking awesome. Thnks a lot ! How can I see the enlarge view of images with next and previous buttons.

    Reply
  36. Bruna #

    Great code! I´d like to know how can i do when in mouse over the image doesn´t move, only appearing the over effect, but whitout moving up and down;

    Best Regards!

    Reply
  37. Ryan #

    This script breaks in the new Firefox 12, because the this.preloadImage = function() {
    image is set to
    img.style.position = “absolute”; it should be img.style.position = “relative”;

    Reply
  38. Neha Parmar #

    I m using this jquery in my project. Its works perfect and looks awesome. Only thing I want in it is to view next and previous image when image is enlarged. Is that possible with it?

    Reply
  40. ThuS #

    Thank you for the wonderful code. Kindly let me know how to add a scroll description (paragraph with a scroll bar) to the popup image

    Thanks a lot in advance

    Reply
  42. ramesh #

    please downloads link

    Reply
  43. Florian #

    Hello Nitin, hope you can help me.
    Before all thanks a lot for the script, It help a lot; I use it here:

    http://www.empacser.com.pe/accesorios.htm

    The images look very well in firefox, but sadly it doensn’t in IEXPLORER, the boxes as shown as they have moved.

    Best regards,
    Florian

    Reply
  45. Ali #

    Very useful example. Thanks for tutorial.

    Reply

Leave a Reply