CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dave
Dave

Reputation: 519

How to display text over a faded image on hover using jquery

I have a picturelink that fades opacity on hover. What I need is for text to be displayed over it. Here is an example of what I want: http://kspla.tumblr.com/ My code below fades the opacity to 40% but I have no idea how to get text to be displayed over it.

<script type="text/javascript">

$(document).ready(function() {
    $('#wb_Image2, #wb_Image3 a img').animate({
        opacity:1
    
    });
    
    $('#wb_Image2, #wb_Image3 a img').hover(function() {
        $(this).stop().animate({opacity:.4},200);
    
    }, function() {
        $(this).stop().animate({opacity:1},500)
    
    });


});

Thanks in advance.

Upvotes: 8

Views: 43652

Answers (6)

Trey Copeland
Trey Copeland

Reputation: 3527

This should get you started: http://jsfiddle.net/SBpzX/2/

$(document).ready(function() {
   $('.text').hide();
    $('img').animate({
       opacity:1

});

$('img').hover(function() {
    $(this).stop().animate({opacity:.4},200);
    $('.text').fadeIn();

}, function() {
    $(this).stop().animate({opacity:1},500)
    $('.text').fadeOut();
});

});

Upvotes: 0

user2435860
user2435860

Reputation: 798

You can put your text into a div and use the position: absolute to put it in the same spot as your image, and also display: none to make it invisible. Then, in JQuery, put your code in order to fade fade the opacity and make this div visible using $('#nameofthediv').show(); BUT make sure to assign this div a higher "z-index" than the one of the image. The z-index property is usefull for example when you have 2 overlapping divs, and you decide which one of them will be on top. The element with the highest z-index is the visible one. If you do not do that, the image will be on top of the text, so you won't be able to see the text.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

Set the text inside a span or a div and position it absolutely corresponding to the container which is relatively positioned.

Then hide or show the corresponding text

$(document).ready(function () {
    $('#wb_Image3 a img').hover(function () {
        $(this).stop().animate({
            opacity: .4
        }, 200);
        $('.text').removeClass('hide');
    }, function () {
        $(this).stop().animate({
            opacity: 1
        }, 500);
        $('.text').addClass('hide');
    });
});

Check Fiddle

Upvotes: 4

rob_mccann
rob_mccann

Reputation: 1245

It's good to remember that if you're handling how things look, chances are it should be done in CSS (which will make your life easier in the long run).

I've mocked up an example here: http://jsfiddle.net/HAcE2/

You basically need to create a box that appears when you hover. By using position:absolute you can get the box to appear over the top and using CSS we can get it to appear when we hover over.

Upvotes: 18

Smeegs
Smeegs

Reputation: 9224

Actually, it looks like they are just fading in a div with white text and opaque background.

What you need to do is have a div with both the image and a text

<div>
   <img src="..." style="position: relative; z-index: 100;" />
   <div style="margin: 0 auto; align: center; height: 100%; width: 100%; position: relative; z-index: 101; opacity: 0; >Number</div>
</div>

This markup makes sure that the text div overlaps the image div. Instead of fading out the image and fading in the text. Just fade in the text.

The other part of this solution is making sure that the text is centered vertically. And adding a 50% opaque background, you can either use css3 with an rgba background color or add a png background and repeat that for the div.

Upvotes: 0

Dylan N
Dylan N

Reputation: 517

You could always add a div with the desirable text in it alongside the image and have its opacity set to 0, then when you hover over the image set the image opacity down and increase the div opacity.

Upvotes: 0

Related Questions