How to create Image Hover effect | HTML & CSS Project

Hello Everyone Welcome to Frontend Gyaan and My First Blog. Today I have made an Amazing Image Hover effect with the help of HTML and CSS Only!

Follow @frontendgyaan on Instagram for web development content daily.

Before starting the blog, you might think about where you can use this project in real-life-based projects. So it’s an Image Hover effect that you can use in your own blog project. So it will look attractive. Hover effects are probably the most used elements in web design, mainly because of the ease of implementing them coupled with a greatly improved user experience.

Let’s start making these amazing Image Hover effects Using HTML & CSS step by step.

How to Create Image Hover Overlay Effect using HTML And CSS Only

1. HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
 <img src="\Frontend gyaan logo.jpg" alt="Frontendgyaan" class="image">
 <div class="overlay">
  <div class="text">Hello World</div>
 </div>
</div>
</body>
</html>

2. CSS


container {
 position: relative;
 width: 50%;
}

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

.overlay {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100%;
 width: 50%;
 opacity: 0;
 transition: .5s ease;
 background-color: #008CBA;
}
.c.container:hover .overlay {
 opacity: 1;
}

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

Output – Image Hover effect

If you found any value in this blog you can support me by buying me a coffee.

If you found any value in this blog you can Follow Instagram Page @frontendgyaan

If you have any idea then you can contact us

Share your love

Leave a Reply