Geek asks and answers

When hovering over the mouse, changing the opacity of the image and text overlay

I want to remove the opacity and overlay the text on the thumbnail when I cursor over it. I have a few ideas on how to do this, but I'm sure they are inefficient and clumsy.

  • Duplicate the image in Photoshop with text overlay and reduced opacity. Change the original to a duplicate when you hover over the mouse.
  • Use CSS to remove opacity on hover. Use Javascript to toggle the visibility of the div containing the overlay text.

The problem that I see with 1 looks like unnecessary use of space and bandwidth and causes slow loading time. With 2, it seems like I would have to hardcode the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I don’t understand how to do it. How can I make this relatively simple task so that it is easy to add new thumbnails?

+3
source share
6 answers
  • Wrap your image in <div class="thumb">
  • Add position: relativeto .thumb.
  • Add <div class="text>inside .thumb.
  • Add display: none; position: absolute; bottom: 0to .text.
  • Use .thumb:hover .text { display: block }to make the text visible when you hover.

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

JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/

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

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

, - JavaScript, JavaScript .

+20

Go 2. , jQuery . 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(); 
});

span.text css, , .

+3

- :

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

, :

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

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

+2

. , , .

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;
}
+2

If you do not want to change your HTML files, etc., I suggest you this way . Here is 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);
        });
    });
});
+1
source

2 is a good decision, made in much the same way as this, and it is not as difficult as it would be difficult for you:

Remove the opacity with css, and don't place the div relative to and above img. This can be done using simple css. Z-index is a trick. This div can simply be shown using $ ('# div'). SlideUp () ie.

0
source

More articles:


All Articles