I need to create a remove button that appear over my thumbs when a user hover that image with his mouse a link appear like remove from favorites?
Anyone know how to achieve this ?
An example of what I want is youtube quick list button you find over the videos thumbs.
I need to create a remove button that appear over my thumbs when a user hover that image with his mouse a link appear like remove from favorites?
Anyone know how to achieve this ?
An example of what I want is youtube quick list button you find over the videos thumbs.
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Dec 15, 2009 at 19:39 EzzDevEzzDev 10.2k12 gold badges37 silver badges35 bronze badges 4- are you using something like jQuery? – Aly Commented Dec 15, 2009 at 19:42
- yes i use jquery .. please note that this will be applied to different thumbs on same page .. so sitting a bg image as thumb in css won't work .. thank you all – EzzDev Commented Dec 15, 2009 at 19:47
- thank you all i am testing all solutions now and will update with best answer soon .. – EzzDev Commented Dec 15, 2009 at 20:05
- issue solved with Tor Valamo solution .. thanks all who helped me on this – EzzDev Commented Dec 15, 2009 at 20:09
4 Answers
Reset to default 7This will show the icon when you hover the thumbnail, and when you hover the icon on top of that, it will change to a hover icon.
.image-thumb, .image-thumb img {
position:relative;
width:60px;
height:50px;
}
.image-fav {
display:none;
position:absolute;
bottom:0;
left:0;
width:15px;
height:15px;
background-image:url(normal_plus.png);
}
.image-thumb:hover .image-fav {
display:block;
}
.image-fav:hover {
background-image:url(hover_plus.png);
}
<div class="image-thumb">
<img src="thumb.jpg" />
<a href="#" class="image-fav"></a>
</div>
Booya!
Modified from Daniel Vassallo's original answer:
CSS:
.image-thumb {
position: relative;
width: 100px;
height: 100px;
/* apply background-image url inline on the element since it is part of the content */
background: transparent url() no-repeat center center;
}
.image-thumb a {
display: none;
position: absolute;
top: 80px; /* position in bottom right corner, assuming image is 16x16 */
left: 84px;
width: 16px;
height: 16px;
background: transparent url(remove_button.gif) no-repeat 0 0;
}
.image-thumb:hover a {
display: block;
}
HTML (presuming that it is generated):
<div class="image-thumb" id="some-unique-thumb-id-1" style="background-image: url(some/image-1.ext)">
<a href="#"></a>
</div>
<div class="image-thumb" id="some-unique-thumb-id-2" style="background-image: url(some/image-2.ext)">
<a href="#"></a>
</div>
....
<div class="image-thumb" id="some-unique-thumb-id-n" style="background-image: url(some/image-n.ext)">
<a href="#"></a>
</div>
JavaScript:
$(function() {
$(".image-thumb a").click(function(e) {
e.preventDefault();
var imageId = $(this).parent().attr("id");
// remove image based on ID.
});
});
Edit: simplified the HTML.
You can use the following CSS-styled <div> to achieve this in pure CSS:
CSS:
.image-thumb {
position: relative;
width: 100px;
height: 100px;
background-image: url(image_thumb.jpg);
}
.image-fav {
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 20px;
background-image: url(fav_icon.png);
background-position: bottom left;
display: none;
}
.image-fav:hover {
display: block;
}
HTML:
<div class="image-thumb">
<a class="image-fav" href="javascript:removeFromFav();"></a>
</div>
<div id = "thumbImg">
<img src="thumb.png" onMouseOver="overlayRemove();"
onMouseOut="hideRemove();" />
<img id='removeImg' src='remove.png'
style='position:relative;left:0px;top:0px;z-index:2;display:none' />
</div>
javaScript:
function overlayPic(){
$('removeImg').show();
}
function hideRemove(){
$('removeImg').fadeOut();
}