I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case. Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
You could use a pseudo element for this, and have your image on a hover:
.image {_x000D_
position: relative;_x000D_
height: 300px;_x000D_
width: 300px;_x000D_
background: url(http://lorempixel.com/300/300);_x000D_
}_x000D_
.image:before {_x000D_
content: "";_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
transition: all 0.8s;_x000D_
opacity: 0;_x000D_
background: url(http://lorempixel.com/300/200);_x000D_
background-size: 100% 100%;_x000D_
}_x000D_
.image:hover:before {_x000D_
opacity: 0.8;_x000D_
}
_x000D_
<div class="image"></div>
_x000D_
Source: Stackoverflow.com