You can covert the default multi-colour images into a stylish 2 colours ‘duotone’ effect with a few lines of CSS code. Basically, the code adds two colour layers over an image with one being dark and the other being light.
Preview: Before & After
Above is the preview of image using ‘cover’ block in the Gutenberg blocks editor.
- Add cover block to the layout
- Select image in the cover block settings.
- Also, set opacity cover block settings to zero.
- Add class vc-image-6 in the cover block settings.
- Then add the following CSS code for this effect.
.vc-image-6 {
width: 100%;
height: 100%;
position: relative;
}
.vc-image-6:after {
background-color: #ffff3f;
content: "";
display: block;
width: 100%;
height: 100%;
mix-blend-mode: darken;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
.vc-image-6::before {
background-color: #3a86ff;
content: "";
display: block;
width: 100%;
height: 100%;
mix-blend-mode: lighten;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}Preview: Using Image
The above preview uses an image block. Note: for this effect to render perfectly, do not set the image width in the image block settings. Instead, change and set max-width value in the following CSS Code.
- Add an image block.
- Assign class vc-image-6-1 to it.
- Add following CSS code (remember to change max-width value in it).
.vc-image-6-1 {
max-width: 400px;
width: 100%;
height: 100%;
position: relative;
}
.vc-image-6-1::after {
background-color: #ffff3f;
content: "";
display: block;
width: 100%;
height: 100%;
mix-blend-mode: darken;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
.vc-image-6-1::before {
background-color: #3a86ff;
content: "";
display: block;
width: 100%;
height: 100%;
mix-blend-mode: lighten;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}💬 Subscribe for Free, for more CSS magic.
For premium CSS Tips & Code.
Click Here to Activate your VeryCSS membership or Login
For premium CSS Tips & Code.
Click Here to Activate your VeryCSS membership or Login