Html 在悬停时在另一个图像上显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19108112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show image over another image on hover
提问by Burrows
I have the following code: JSFiddle
我有以下代码：JSFiddle
HTML:
HTML：
<div class="profile-image">
<a href="#"><img src="image.png" /></a>
</div>
CSS:
CSS：
.profile-image img {
width: 48px;
height: 48px;
position: absolute;
left: 12px;
top: 12px;
border-radius: 500px;
display: block;
}
The image tag in the HTML mustbe there.
HTML 中的图像标签必须在那里。
How can I make it so that when you hover over the image in the image tags, it shows another image over top of it?
我怎样才能做到当你将鼠标悬停在图像标签中的图像上时，它会在它上面显示另一个图像？
回答by Tushar
You can show another div on hover of parent div.
您可以在父 div 悬停时显示另一个 div。
.imageBox:hover .hoverImg {
display: block;
}
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}<div class="imageBox">
<div class="imageInn">
<img src="http://3.bp.blogspot.com/_X62nO_2U7lI/TLXWTYY4jJI/AAAAAAAAAOA/ZATU2XJEedI/s1600/profile-empty-head.gif" alt="Default Image">
</div>
<div class="hoverImg">
<img src="https://lh5.googleusercontent.com/-gRq6iatuNYA/AAAAAAAAAAI/AAAAAAAAANk/674knqRN1KI/photo.jpg" alt="Profile Image">
</div>
</div>回答by Bindiya Patoliya
Try something like this
尝试这样的事情
<div class="profile-image">
<a href="#"><img src="image.png" /></a>
<div class="image_hover_bg"></div>
</div>
<style>
.profile-image{
position: relative;}
.profile-image img {
width: 48px;
height: 48px;
border-radius: 500px;
display: block;
}
.image_hover_bg{
background: url("images/zoom_icon.png") no-repeat scroll center center rgba(0, 0, 0, 0);
height: 171px;
position: absolute;
top: 0;
width: 210px;
z-index: -1;
display:none;
}
.profile-image:hover .image_hover_bg{display:block}
</style>
回答by Burrows
Got it myself.
我自己拿到了。
HTML:
HTML：
<div class="profile-image">
<a href="#"><img src="assets/img/avatar.png" /></a>
<span class="overlay"></span>
</div>
CSS added:
CSS 添加：
.profile-image:hover .overlay {
position:absolute;
width: 48px;
height: 48px;
z-index: 100;
background: transparent url('overlay_image.png') no-repeat;
cursor: pointer;
}
回答by Mahmud
I got it myself to show an image in the center of another image on hover
我自己在悬停时在另一个图像的中心显示图像
HTML:
HTML：
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<div class="imageBox">
<div class="imageInn">
<img src="background.jpg" alt="Profile Image">
</div>
<div class="hoverImg center">
<img src="sign-check-icon.png" alt="default image">
</div>
</div>
</html>
CSS:
CSS：
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 350px;
top: 100px;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
Note that left: 350pxand top: 100pxwill be changed based on your background-image in my case background-image was 700x200(width x height). So in order to position the image to the center just take half of width and height.
请注意，left: 350px并top: 100px会根据我的情况下，背景图像的背景图像上更改为700x200（宽x高）。因此，为了将图像定位到中心，只需取宽度和高度的一半。
