2021-02-01
Darken image without pseudo element
In the demo below I use mix-blend-mode: multiple;
.
HTML
<figure>
<img src="https://csspoo.com/images/s.jpg">
</figure>
CSS
figure {
background-color: #888;
width: 150px;
display: flex;
}
img {
mix-blend-mode: multiply;
width: 100%;
}
img:hover {
mix-blend-mode: normal;
}
Comments