发表新帖
发表新帖

Show image over another image on hover

后端 未结
关注
4 973
春和景丽
春和景丽 2020-12-16 08:03

I have the following code: JSFiddle

HTML:


  


        

                      

              相关标签:
4条回答
  • 被撕碎了的回忆
    2020-12-16 08:18

    I got it myself to show an image in the center of another image on hover

    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;
}

    Note that left: 350px and top: 100px will 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.

    0 讨论(0)
  • 南方客
    2020-12-16 08:20

    Got it myself.

    HTML:

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

    CSS added:

    .profile-image:hover .overlay {
  position:absolute;
  width: 48px;
  height: 48px;
  z-index: 100;
  background: transparent url('overlay_image.png') no-repeat;
  cursor: pointer;
}
    0 讨论(0)
  • 别跟我提以往
    2020-12-16 08:26

    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>
    0 讨论(0)
  • 轮回少年
    2020-12-16 08:35

    You can show another div on hover of parent 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>

    0 讨论(0)
 看不清?
提交回复
热议问题