MANICX100 MANICX100 - 12 days ago 6
CSS Question

Overlay transparent image on hover

I have a

<div>
with a
background-image
. When this is hovered over I would like another image to be placed on top partially transparent so the original image can be seen below.

My current idea involved adding a
:hover
state and changing the above images
display
state to
visible
along with necessary
z-index
values.

Could someone give me an example with jsfiddle.net implementation?

Answer

Whipped up a quick example for you. Hit "Run code snippet" to see it in action.

.image-holder {
  background: url('http://i.imgur.com/5ln9Vmi.jpg');
  height: 500px;
  width: 500px;
  position: relative;
}

.image-holder::before {
  content: '';
  background: url('http://i.imgur.com/khYHDfJ.jpg');
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s;
}

.image-holder:hover::before {
  opacity: .5; /* amount of opacity to blend the two images */
}
<div class="image-holder">
</div>

Comments