How do you overlay a div over an img, and show another div onmouseover?

Question

I have a list thumbnails that lead to larger counterparts when clicked. I'd like to show the image title in a div, at the bottom edge of the thumbnail. Also, when a mouse is moved over the thumbnail, it shows a 2nd div (containing text) over the entire thing.

Whats the best way of doing that? If a js library is required, jquery is preferred.

Answer 1

<div>
    <img id="image-1" src="yourimage.png" title="My title" />
    <p id="image-1-title"></p>
</div>


$(document).ready(function(){
    $("img[id^='image-']").each(function(i){
     var id = $(this).attr("id");
     var title = $(this).attr("title");
     $("#"+id+"-title").html(title);
    });
});

That should do for image titles :)

Answer 2

If you are ready to go with jQuery then here is a fantastic post by Sam Dunn.

Answer 3

I wrote a small plugin some time ago that allows you to do what you need, and with an animation on hover. It was originally made to add hover background animations but I guess it should be able to do what you need.

    /*
     * jQuery Animate Background (v0.2)
     * Copyright (c) 2009 Mario "Kuroir" Ricalde ( http://twitter.com/exolimpo )
     * Usage:
     *  $("h1").animateBg();
     *  Con Campos Opcionales:
     *  $("div").animateBg({time:130,add:"span"});
    */
    (function($){
        $.fn.animateBg = function(opciones){
         $.fn.animateBg.defecto = {
          time : "fast", add : "span"
         };
         var config = $.extend({}, $.fn.animateBg.defecto, opciones);
         this.each(function(){
          var c = config;
          var title = $(this).attr("title");
          $(this).append("<"+ c.add +">" + title + "</"+ c.add +">").hover(function(){
           $(this).children(c.add).fadeIn(c.time);
          },function(){
           $(this).children(c.add).fadeOut(c.time);
          });
         });
        }
    })(jQuery);

$(document).ready(function(){
    $("#thumb-list p img").animateBg();
});

<div id="thumb-list">
    <p><img src="lol.jpg" title="My title" /></p>
</div>

Sorry if the code doesn't work.. I couldn't test since I'm not at home.