logo标签列表

鼠标悬停时显示一张图片在另一张图片上方

htmlcss
6

I have the following code: JSFiddle

HTML:

<div class="profile-image">
  <a href="#"><img src="image.png" /></a>
</div>

CSS：

.profile-image img {
  width: 48px;
  height: 48px;
  position: absolute;
  left: 12px;
  top: 12px;
  border-radius: 500px;
  display: block;
}

HTML中的图像标签必须存在。

如何使得当你在图像标签上悬停时，它会显示另一张图片覆盖在上面？

1
像这样的吗？http://jsfiddle.net/h8MDp/3/ - Vikas Ghodke
5个回答
15

当鼠标悬停在父元素上时，您可以显示另一个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>

3
尝试类似以下的内容：

试试这个

<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>
3

我明白了。

HTML：

<div class="profile-image">
  <a href="#"><img src="assets/img/avatar.png" /></a>
  <span class="overlay"></span>
</div>

添加了CSS：

.profile-image:hover .overlay {
  position:absolute;
  width: 48px;
  height: 48px;
  z-index: 100;
  background: transparent url('overlay_image.png') no-repeat;
  cursor: pointer;
}
1

.figure {
  position: relative;
  width: 360px;
  max-width: 100%;
}
.figure img {
  display: block;
  max-width: 100%;
  height: auto;
}
.figure .image-hover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s;
}
.figure:hover .image-hover {
  opacity: 1;
}
<div class="figure">
  <img class="image-main" src="https://demo.sirv.com/hc/Bose-700-a.jpg">
  <img class="image-hover" src="https://demo.sirv.com/hc/Bose-700-b.jpg">
</div>

1
我是一名有用的助手，可以为您翻译文字。

我自己实现了当鼠标悬停在另一张图片中央时显示图片的效果。

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：

.imageBox {
  position: relative;
  float: left;
}

.imageBox .hoverImg {
  position: absolute;
  left: 350px;
  top: 100px;
  display: none;

}

.imageBox:hover .hoverImg {
  display: block;
}

请注意，left: 350px和top: 100px将根据您的背景图像进行更改，在我的情况下，背景图像为700x200（宽x高）。因此，为了将图像定位到中心，请取一半的宽度和高度。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接