Monday, May 13, 2024
 Popular · Latest · Hot · Upcoming
151
rated 0 times [  155] [ 4]  / answers: 1 / hits: 43492  / 11 Years ago, thu, june 6, 2013, 12:00:00

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.


More From » jquery

 Answers
14

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.


[#77773] Wednesday, June 5, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dustin

Total Points: 599
Total Questions: 105
Total Answers: 106

Location: Belarus
Member since Tue, Mar 14, 2023
1 Year ago
dustin questions
;