Add Duotone 2 colour effect to images

duotone two color photos

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

Sample Image 02

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

Leave a Comment

Your email address will not be published.