Text over image jQuery
Question
I am trying to make text appear on an image when you hover over it. I've tried a few different ways but none seem to work, or work reliably. I am writing my code in HTML with jQuery, please show me what to do! :D
$(document).ready(function() { $('img').css('height', '150px'); $('img').css('width', '150px'); $('img').css('padding', '10px'); $('img').css('border-radius', '30px'); $('#container').css('width', '1040px'); $('#container').css('margin-left', 'auto'); $('#container').css('margin-right', 'auto'); }) $(document).ready(function() { $('img').click(function() { $('#container').append("<p>It worked chaps</p>"); }); });
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div id="gallery"> <div id="container"> <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> <p>It worked</p> </div> </div> </body> </html>
3 answers
solution1
1 ACCPTED 2014-10-25 11:47:15
Try it out: JSFiddle
$("img").hover( function(){
$(".hover").show().offset($(this).offset());
}, function(){
$(".hover").hide();
});
This will make element with class hover appear over any image when hovering.
solution2
0 2014-10-25 11:44:28
I don't know why you are doing this with jQuery, you should do it with CSS.
I'll give you a basic example. Html:
<div class="wrapper">
<img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"/>
<div class="text">Here is the text</div>
And the CSS:
img {
width: 300px;
}
.wrapper {
position: relative;
}
.text {
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.wrapper:hover .text {
display: block;
}
Jsfiddle: http://jsfiddle.net/c32jud6j/
solution3
0 2014-10-25 11:49:32
HTML:
<div class="imgWrap">
<img src="http://www.corelangs.com/css/box/img/caption4.jpg" alt="polaroid" />
<p class="imgDescription">This image looks super neat.</p>
</div>
CSS:
.imgWrap {
position: relative;
}
.imgDescription {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
visibility: hidden;
opacity: 0;
}
.imgWrap:hover .imgDescription {
visibility: visible;
opacity: 1;
}
Try it on JSFiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.