On mouseover, changing an image's opacity and overlaying text

Question

I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.

1. Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.
2. Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.

The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?

Answer 1

• Wrap your image in a <div class="thumb">
• Add position: relative to .thumb .
• Add <div class="text> inside .thumb .
• Add display: none; position: absolute; bottom: 0 display: none; position: absolute; bottom: 0 display: none; position: absolute; bottom: 0 to .text .
• Use .thumb:hover .text { display: block } to make the text visible on hover.

Like this: http://jsfiddle.net/dYxYs/

You could enhance this with some JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/

$('.text').hide().removeClass('text').addClass('text-js');

$('.thumb').hover(function(){
    $(this).find('.text-js').fadeToggle();
});

This way, the basic effect still works without JavaScript, and users with JavaScript get the appealing fade effect.

Answer 2

Go with option 2. There are ways to do it to not have to write a jQuery function for each image. As seen in my jsfiddle.

http://jsfiddle.net/daybreaker/dfJHZ/

HTML

<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>

jQuery

$('img').mouseover(function(){
    $(this).css('opacity','.2');
    $(this).next('span.text').show();
}).mouseout(function(){
    $(this).css('opacity','1');
    $(this).next('span.text').hide(); 
});

You would need to modify the span.text css to overlay it on top of the image, but that shouldnt be too bad.

Answer 3

Wrap it in an element and do something like this:

var t;
$('div.imgwrap img').hover(function(){
   t = $('<div />').text($(this).attr('title')).appendTo($(this).parent()); 
    $(this).fadeTo('fast',0.5);
},function(){
     $(this).fadeTo('fast',1);
    $(t).remove();
});

with a markup similar to:

<div class="imgwrap">
    <img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>

example: http://jsfiddle.net/niklasvh/Wtr9W/

Answer 4

Here's an example. You can position the text however you want, but the basic principle below.

http://jsfiddle.net/Xrvha/

#container { position: relative; }

#container img, #container div {
    position: absolute;
    width: 128px;
    height: 128px;
}

#container img { z-index -1; }
#container div { 
    z-index 1; 
    line-height: 128px;
    opacity: 0;
    text-align: center;
}

#container:hover img {
    opacity: 0.35;
}
#container:hover div {
    opacity: 1;
}

Answer 5

If you don't want to change your HTML wraping things etc, I suggest you this way . Here is the jQuery:

$(function() {
    $(".thumb").mouseenter(function() {
        var $t = $(this);
        var $d = $("<div>");
        $d.addClass("desc").text($t.attr("alt")).css({
            width: $t.width(),
            height: $t.height() - 20,
            top: $t.position().top
        });
        $t.after($d).fadeTo("fast", 0.3);
        $d.mouseleave(function() {
            $(this).fadeOut("fast", 0, function() {
                $(this).remove();
            }).siblings("img.thumb").fadeTo("fast", 1.0);
        });
    });
});

Answer 6

2 is a good solution, have done about the same as this and it isn't as hard as you would've tought;

Drop de opacity with css indeed, than position a div relative to the img, and over it. It can be done with plain css. The z-index is the trick. That div can just be shown with $('#div').slideUp() ie.