Как вы наложите div на img и покажете еще один div?

Question

У меня есть список миниатюр, которые приводят к большим копиям при нажатии. Я хотел бы показать заголовок изображения в div, в нижней части эскиза. Кроме того, когда указатель мыши перемещается над миниатюрой, он показывает 2-й элемент div (содержащий текст) над всем объектом.

Какой лучший способ сделать это? Если требуется библиотека js, предпочтительным является jquery.

Answer 1

Если вы готовы пойти с jQuery , то вот фантастический пост Сэм Данн .

Answer 2

Некоторое время назад я написал небольшой плагин, который позволяет вам делать то, что вам нужно, и с анимацией при наведении курсора. Первоначально он был создан для добавления всплывающей фоновой анимации, но я думаю, что он сможет делать то, что вам нужно.

    /*
     * 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>

Извините, если код не работает .. Я не смог проверить, так как меня нет дома.

Answer 3

<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);
    });
});

Что следует сделать для заголовков изображений:)