Element CSS to add Effect on Image

[erickijimenez]

Hello! I would like to add CSS in a specific element (image) to add a hover effect in which I add a red layer on top with opacity of 0.3 can you help me code this?

[rad]

Hi Erick,

Thanks for reaching out.

Sure, please add this CSS to your Image’s Element CSS

$el {
  position: relative;
}
$el:after {
  
  content:"";
  display:block;
  position: absolute;
  top:0;
  width: 100%;
  bottom: 0;
  background: red;
  opacity:0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
$el:hover:after {
  opacity: 0.3;
}

Thanks!

[erickijimenez]

It worked wonderfully, thank you!!

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!