Back to Guides

Tutorial: Image Overlay

We can overlay images in posts and pages onto black or white backgrounds to create a darker or lighter effect. Wrap the image in a <div> and give is a class e.g. image-overlay. Then give the image you want the overlay an additional class e.g. class=”image-overlay.darker”. Now add this to your style.css file:
.image-overlay {
	display: block;
        width: 100%;
	height: 100%;
	opacity: 0.5;
	background-color: #000;
}
// And one of the following:

// Darker image
.image-overlay.darker {background-color: #000;}
.image-overlay.darker img {opacity:0.5;}

//Lighter image
.image-overlay.lighter {background-color: #fff;}
.image-overlay.lighter img {opacity:0.5;}
So our images go from this: Featured image To this (darker):

Featured image

Or this (lighter):

Featured image

Back to the Top