CSS Animation: Card Width expand on hover

In this tutorial, you will learn how to create a pure CSS card width expand animation with hover effect.

If you want to create this type of animation, simply use the following CSS code snippet.

CSS Code

.container {
  display: flex;
}
.card {
  height: 200px;
  background: rgb(48, 207, 232);
  flex: 1;
  transition: 0.3s;
}
.card:hover {
  flex: 3;
  background: rgb(12, 171, 195);
}

We made a image gallery animation using this code snippet

Source Code

Thanks for Reading ❤️! Check my website Demo coding for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let’s be friends!

Don’t forget to subscribe to our channel : Demo code