CODEWITHSUNDEEP
htmlcss
Burrows
Burrows

Reputation: 495

Show image over another image on hover

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

The image tag in the HTML must be there.

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?

Upvotes: 6

Views: 77511

Answers (5)

Abu Sayed
Abu Sayed

Reputation: 187

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

Upvotes: 1

Mahmud
Mahmud

Reputation: 383

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.

Upvotes: 1

Tushar
Tushar

Reputation: 4418

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>

Upvotes: 15

Burrows
Burrows

Reputation: 495

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

Upvotes: 3

Bindiya Patoliya
Bindiya Patoliya

Reputation: 2764

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>

Upvotes: 3

Related Questions