In this post we will learn to create different types of overlay effects. Whenever the user hovers over the image with the mouse, he will see these effects. These overlay effects can be of five types: top, bottom, left, right and fade.


How To Create Image Overlay Hover Effects with CSS ?


Create Image Overlay Hover Effects

To create different types of overlay effects on the image, first we will write the code of HTML and CSS. This code will work equally in all overlay effects. We will write separate code to create different types of overlay effect.

To write the code, we follow the following steps:

Step 1 : In this step, we write HTML code. In this HTML code, first take a div and give it containerOverlay class. Then take an image inside this div. We will perform all overlay effects on this image. Then take a div and give it overlayText class. Through this div, we will create all overlay effects. Then inside this div, take another div and give it  text class. Text written inside this div will be visible to us during the overlay effect.

<!DOCTYPE html>
<html>
<head>
<title>How To Create Image Overlay Hover Effects with CSS ?</title>
<style>
</style>
</head>
<body>

<div class="containerOverlay">
<img src="https://source.unsplash.com/600x300/?coder" class="image">
<div class="overlayText">
<div class="text">CodexRadar</div>
</div>
</div>

</body>
</html> code-box

Step 2 : In this step, we write CSS code.

.containerOverlay {
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.text {
color: white;
font-size: 20px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
} code-box


Top Overlay Effect

We style overlayText to create a top overlay effect. First we set its position absolute so that we can set its position according to containerOverlay. Let's change its top value to 0 so that it opens from top to bottom. Let's set its height to zero and width to 100%. Now let's also set the value of transition and background-color.

Now when we hover over contentOverlay we set the height of overlayText to 100%. Now when we move the mouse over the image, we will see a love overlay effect.

For the top overlay effect, we write the code as follows:

.overlayText {
position: absolute;
top: 0;
height: 0;
width: 100%;
overflow: hidden;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}
.containerOverlay:hover .overlayText {
height: 100%;
} code-box


Bottom Overlay Effect

For the bottom overlay effect, we set the value of bottom to zero instead of the top. Now you will see that the overlay effect is going from bottom to top.

For the bottom overlay effect, we write the code as follows:

.overlayText {
position: absolute;
bottom: 0;
height: 0;
width: 100%;
overflow: hidden;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}
.containerOverlay:hover .overlayText {
height: 100%;
code-box


Left Overlay Effect

To create the left overlay effect, we set the position of  overlayText to top and left. Now let's set its height to 100% and width to 0. When we hover over containerOverlay, we set the width to 100%. So that we can see the overlay effect from left to right.

For the left overlay effect, we write the code as follows:

.overlayText {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
overflow: hidden;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}
.containerOverlay:hover .overlayText {
width: 100%;
} code-box


Right Overlay Effect

For the right overlay effect, we set the value of right to 0 instead of left in the code of left overlay effect. Now we will see the overlay effect going from right to left.

For the right overlay effect, we write the code as follows:

.overlayText {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 0;
overflow: hidden;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}
.containerOverlay:hover .overlayText {
width: 100%;
code-box


Fade Overlay Effect

To create the fade overlay effect, we set the position of the overlayText according to the containerOverlay and set the height and width value to 100%. The most important factor to create fade overlay effect is opacity. Let's set the value of opacity to 0.

When we hover over containerOverlay we will set the value of opacity of overlayText to 1. So that we can see the fade overlay effect.

For the fade overlay effect, we write the code as follows:

.overlayText {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
overflow: hidden;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
opacity: 0;
}
.containerOverlay:hover .overlayText {
opacity: 1;
} code-box

Summary

In this post we learn how to create image overlay hover effects with CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post