CSS overlayOverlay 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 effectIn 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. ExampleTest it NowImage overlay slideWe 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 bottomFirst, we see how to create the slide in an overlay from the top using an example. ExampleTest it NowSlide in Overlay from bottom to topIn 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. ExampleTest it NowSlide in Overlay from left to rightAs its name implies, there is sliding from left to right. See the following example to understand it in detail. ExampleTest it NowSlide in Overlay from right to leftIt is similar to the above sliding effects except that the sliding in it is from right to left. ExampleTest it NowImage Overlay titleIn 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. ExampleTest it NowImage Overlay iconIn 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. ExampleTest it Now
Next TopicCSS :root selector
|