CODEWITHSUNDEEP
htmlcss
Ticcing Queer
Ticcing Queer

Reputation: 19

How can I add a transparent colour over a img when I hover over it?

I want that, when I hover over an image, it gets like a white sheen over it, I'd to that with rgba, but I don't know how to add colour over an image with css in the first place. I'd think that's possible somehow? Or I bet there's some form of way around to make that work?

Thank you for any help in advance!

Upvotes: 1

Views: 38

Answers (1)

Warden330
Warden330

Reputation: 1042

I usually do it like this:

(red background is to fake a picture here, cause i cant upload one into the snippet ofc. just imagine the Picture is a red square)

.picture-container {
  /*Position absolute will refer to the last Parent-Element with a set Position */
  position: relative;
  height: 500px;
  width: 500px;
}

.picture{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /*just to make it visible, imagine it's a red square picture*/
  background-color: red;
  z-index: 6;
  cursor: pointer;
}
.picture:hover{
  z-index: 4;
}

.picture-overlay{
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,0.5);
  height: 100%;
  width: 100%;
  z-index: 5;
  /*pointer-events: none keeps the Picture clickable etc even when the div is above it*/
  pointer-events: none;
}
<div class="picture-container">
   <img class="picture" src="">
   <div class="picture-overlay"></div>
</div>

Upvotes: 1

Related Questions