CSS overlay

Overlay means to cover the surface of something with a coating. In other words, it is used to set one thing on the top of another. The overlay makes a web-page attractive, and it is easy to design.

Creating an overlay effect means to put two div together at the same place, but both will appear when required. To make the second div appear, we can hover or click on one div. In these two divs, one div is the overlay div that contains what will show up when the user hovers over the image, and the second div is a container that will hold both the image and its overlay.

Fade overlay effect

In this overlay effect, when we move the cursor on the image, then the overlay will appear on the top of the image. Let's see how it works.

Example

Image overlay slide

We can create a sliding overlay effect by four different types that are top, bottom, left, and right. We are going to discuss it one by one using an example of each.

Slide in Overlay from top to bottom

First, we see how to create the slide in an overlay from the top using an example.

Example

Slide in Overlay from bottom to top

In this overlay effect, when we move the cursor over the image, there will be sliding from bottom to top. It will be clear in the following illustration.

Example

Slide in Overlay from left to right

As its name implies, there is sliding from left to right. See the following example to understand it in detail.

Example

Slide in Overlay from right to left

It is similar to the above sliding effects except that the sliding in it is from right to left.

Example

Image Overlay title

In the image overlay effect, when we move the cursor over an image, we will see the title on the image. See the below illustration for the same.

Example

Image Overlay icon

In this overlay effect, on mouse hovering, there will be an icon that covers the entire image. We can set the link on that icon to switch between the pages. It can be clear from the following example.

Example