Hover image - display div over it
Question
On hover I want a link apear at the top-right of the image. Just like on your profile picture on Facebook, where it says "Change Picture".
I have tried to to get it working with a bit of jquery but had no luck, as it doesn't go t the right of the image. The images are going to be different sizes as they are profile pictures. So whatever the size, it needs to stay at the top-right of the image.
JQuery:
$(".imgHover").hover(function() {
$(this).children("img").fadeTo(200, 0.25)
.end().children(".hover").show();
}, function() {
$(this).children("img").fadeTo(200, 1)
.end().children(".hover").hide();
});
HTML:
<div class="imgHover">
<div class="hover"><a href="htpp://google.com">Edit</a></div>
<img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" />
</div>
CSS:
.imgHover .hover {
display: none;
position:absolute;
z-index: 2;
}
Thanks!
5 answers
solution1
11 ACCPTED 2010-11-29 20:50:20
This is the way I done it: CSS:
.imgHover {
display: inline;
position: relative;
}
.imgHover .hover {
display: none;
position: absolute;
right:0;
z-index: 2;
}
HTML:
<div class="imgHover">
<div class="hover"><a href="htpp://google.com">Edit</a></div>
<img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="">
</div>
JQuery:
$(function() {
$(".imgHover").hover(
function() {
$(this).children("img").fadeTo(200, 0.85).end().children(".hover").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
});
});
Test this on jsfiddle .
solution2
2 2010-11-29 18:36:44
Try
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <style> .imgHover { display: inline; position: relative; } .imgHover .hover { display: none; position: absolute; right: 5px; top: 5px; z-index: 2; } </style> </head><body> <script> $(function() { $(".imgHover").hover( function() { $(this).children("img").fadeTo(200, 0.25).end().children(".hover").show(); }, function() { $(this).children("img").fadeTo(200, 1).end().children(".hover").hide(); }); }); </script>
<div class="imgHover"><div class="hover"><a href="htpp://google.com">Edit</a></div><img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt=""></div>
</body> </html>
solution3
2 2010-11-29 18:39:08
If the imgHover is made to match its contents, then it should just have position:relative and the hover class have position:absolute and top:0;right:0
Example at http://www.jsfiddle.net/FvBqA/
solution4
1 2010-11-29 18:32:32
make your image a background for div with relative positioning and add inner div to it with the overlay content style it with display:none
then imgdiv:hover innerdiv{display:block} will do the trick
solution5
1 2010-11-29 18:37:16
You need to absolute position the link in a container that has position different than the normal flow. In this example I use relative for that on the container. Try this:
HTML
<div class="imgHover">
<div class="imgContainer">
<a href="http://google.com">Edit</a>
<img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" />
</div>
</div>
CSS
.imgHover { float: left; }
.imgContainer { position: relative; }
.imgContainer a { display: block; position: absolute; top: 0; right: 0; background: Green;}
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.