Enlarge image on hover and add spotlight text


I am having difficulty finding a tutorial on enlarging an image on mouse hover, then shading the enlarged image dark so I can put some text over it.

This example does almost everything except make the image larger: http://jsfiddle.net/balupton/FZG3v/


.ih { position:relative; }
.ih, .ih-image, .ih-info { display:block;width:330px;height:220px; }
.ih-image, .ih-info { z-index:500;position:absolute;top:0;left:0;right:0;bottom:0; }
.ih-info { z-index:501;background:black;color:white; }


<img class="ih-image" src="http://designsnack.com/screenshots/image.php width=330&amp;height=220&amp;cropratio=330:220&amp;image=/screenshots/8264948088.jpg"/>
     <div class="ih-info">
         Your overlay content


    // Over
        var $ih = $(this);
        $ih.find('.ih-info').stop(true,true).animate({opacity:0.8}, 400);
    // Out
        var $ih = $(this);
        $ih.find('.ih-info').stop(true,true).animate({opacity:0}, 400);

It's my first question, apologies if I am not clear or am missing some information.

Many thanks for any help!

EDIT: Thanks ghost! My end goal is to enlarge the image from the center as ultimately there will be 4 images in a 4X2 configuration.

Problem courtesy of: HatHead


You can do this many ways using jQuery, one of them is to use animate() method to smoothly change image size: http://jsfiddle.net/FZG3v/44/

Solution courtesy of: ghost


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.