MANICX100 MANICX100 - 4 months ago 49
CSS Question

Overlay transparent image on hover

I have a

with a
. 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
state and changing the above images
state to
along with necessary

Could someone give me an example with implementation?


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

.image-holder {
  background: url('');
  height: 500px;
  width: 500px;
  position: relative;

.image-holder::before {
  content: '';
  background: url('');
  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">