In an HTML designing layout, there are too many different types of CSS that HTML designers used for making their website looking good. So today I am just talking about Overlay CSS. Sometimes you stuck for making an overlay content, but I am sure after reading this blog post your issue will be solved.

Let’s start about overlay  CSS-

overlay

There is simple technique for creating overlay –

Absolutely positioned:

This is the CSS which is needed to make an overlay effect.

1) In the above CSS overlay is the class name which is used for making an overlay.
2) Position: absolute, is used for absolute position for the overlay.
3) height and width take 100% for showing overlay effect in full area.
4) background-color: rgba(0,0,0,0.5) if you want to show color then you can take any color for the background. Otherwise, you can take any text.

The following CSS code shows how to transparent color overlay on images. Also, you can see how to overlay one div over another div.

 

 Here is the output.

image

White Overlay Image –

For adding white overlay just need to some changes in Code. See below –

 

Position one image on top of another –

The Below CSS code shows how to overlaying image on another image.

By use of this CSS, you can change the image after hovering on one image. This looks so cool.

For more overlay effects you can try w3schools image overlay technique.