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