Let’s make Amazing Image Hover Effect

Hey, today we will make a image hover effect like above. Check out below reel on Instagram, its a preview of what we are building.

Amazing mini Image Gallery HTML👇

Now, let’s get started!

Step 1: HTML

<div class="container">
<div class="card">
<img src="..." alt="...">
</div>
<div class="card">
<img src="..." alt="...">
</div>
<div class="card">
<img src="..." alt="...">
</div>
<div class="card">
<img src="..." alt="...">
</div>
<div class="card">
<img src="..." alt="...">
</div>
</div>

Step 2: CSS

.container {
  display: flex;
  width: 40%;
}
.card {
  height: 200px;
  flex: 1;
  margin: 0 2px;
  box-shadow: 0 0 50px #0002;
  overflow: hidden;
  border-radius: 4px;
  transition: .3s;
}
.card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  filter: grayscale(1);
}
.card:hover {
  flex: 3;
}
.card:hover img{
  filter: none;
}

Check out below pen:

So, this is it for today. Thanks for Reading 😊

Don’t forget to like and follow for more…

Instagram: @coding_dev_

Support: https://www.buymeacoffee.com/codingdev