OVERLAY EFFECT IN CSS

An overlay is a transparent layer of content that is placed on top of another element. It can be used to create different effects, such as a modal window, a tooltip, or a popover.
Creating an overlay effect means to put two div together at the same place, but both will appear when required.
<html>
<head>
<title>CSS</title>
<style>
.overlay-container img
{
width: 200px;
height: 200px;
margin-left: 250px;
}
.overlay-container
{
position: relative;
width: 25%;
height: auto;
}
.overlay-container:hover .bottom-top
{
opacity: 1;
height: 200px;
}
.bottom-top
{
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 200px;
border-radius: 5px;
height: 0;
bottom: 0;
left: 250px;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2
{
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src= "download.png">
<div class="bottom-top">
<h2>Bottom to Top Image Overlay</h2>
</div>
</div> </body>
</html>

CSS

To see the effect, hover your cursor over the image.

Bottom to Top Image Overlay