Problem with an image overlay size

[zawieja]

So I'm not the best at CSS really, but I usually manage to do a lot by trial and error. And I figured out a way to do this as well, but it's a bit too time-consuming.

I want my website to be almost 100% green in reference to an old nokia phone. It's problematic when I want to include something from the outside, like, let's say very colorful melonland button.

The little workaround I have for now is having a green overlay that disappears when you hover over it. However, I always have to set up the size manually, or else it breaks either the position of the image, or it thinks the size takes the whole width of the webpage. So if I would like to have a lot of different sized images with this effect and were to manually set the size everywhere... Oof.

There is probably some kind of very easy solution to it but I'm messy and I got lost in what I'm doing. I would appreciate any help.    I imagined putting something like "width: 100%" somewhere would work but it just doesn't no matter what I do.

Simplified code I have, hopefully I didn't miss anything.


CSS part

Code

.imgoverlay {
  mix-blend-mode: multiply;
  background-color: #00ff80;
  position:absolute;

}
.imgoverlay:hover {
  opacity: 0;

}

Example of a HTML part that actually works

Code

     <div style="position:relative;   margin-left:30px;" >
              <div class="imgoverlay" style="width: 100px; height: 100px;"></div><img src="images/varhin.gif">
              <div class="imgoverlay" style="width: 75px; height: 75px;"></div><img src="images/lunn2.gif">
     </div>

[Rrim0]

Hi! Cool effect!

Maintaining the overlay you can change the code like this:

HTML:

Code

<div class="imgcontainer">
  <img class="imgoverlay" src="images/varhin.gif">
  <div class="overlay"></div>
</div>

CSS:

Code

.imgcontainer {
  position: relative;
  /*example of width and margin*/
  max-width: 150px; 
  margin: 15px;
}

.imgoverlay {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .3s ease; /*just because I like some transition, you can delete it*/
  mix-blend-mode: multiply;
  background-color: #00ff80;
}

.imgcontainer:hover .overlay {
  opacity: 0;
}

Now when you want to adjust the size of the image you have to adjust the size of the .imgcontainer. The overlay will follow! :)

****

OR for another cool CSS trick: instead of adding a div with an overlay you can apply a colour filter directly to the original image that makes it sepia and then revert back to its original colour when hovered. Unfortunately there is no green filter I am aware of. :(  (link to W3s for more info)

Example:

Code

.image {
 filter: sepia(100%);
}

image:hover {
 filter: none;
}

I hope this will help! Let me know if it's difficult to understand. I'm not the best at explaining code.

[xixxii]

@Rrim0 there kind of is a green filter!

one of the possible css image filters actually lets you use SVG filters, which can do a LOT, although i don't super understand how they work. fortunately turning things green is pretty simple!!

if you put this in your html

Code

<svg>
<filter id="green">
  <feColorMatrix in="SourceGraphic" type="matrix" 
                   values="0 0 0 0 0
                           0 1 0 0 0
                           0 0 0 0 0
                           0 0 0 1 0">
</filter>
</svg>

and this in the css

Code

img {filter:url(#green)}

img:hover {filter:none;}

all your images will become green and then be normal when hovered over! you can also make the svg thing a separate xml file and point the url at that instead of putting it in your html, which is probably better if it's something you want on every page. the color matrix and the svg filters are too complicated for me, but it seems super flexible if you can wrap your head around it!

OR you could combine the sepia filter with hue-rotate to turn the yellow tint of sepia into green (or whatever other color you like)! it will still have the washed-out look of sepia, though.

Code

img {
	 filter: sepia(100%) hue-rotate(60deg);
	}
	 
	img:hover {
	 filter: none;
	}

[Rrim0]

@xixxii WOW, all your solutions are great!

img {
       filter: sepia(100%) hue-rotate(60deg);
      }

I was trying to do something like this before, but I couldn't get the syntax right. Can't believe it was this simple, ahaha.
Maybe to get it to look less washed-out you could combine it with saturate, like:

Code

 
.image {
  filter: sepia(100%) hue-rotate(80deg) saturate(3);
}

From a little demo I just did, it doesn't look super good, but it's so cool you can do something like this.

[zawieja]

@xixxii   @Rrim0   the sepia filter solution was EXACTLY what I needed! The green hue looks great with the proper saturation, it keeps the code very simple and it just works really well! Thank you both so much!

It was interesting to learn about the svg filters too    it seems more tricky to get the right color but I can see myself playing around with it in the future. I'm very glad I asked here and I learned something cool