DEV Community

Cover image for CSS Animation: Card Width expand on hover
Jon Snow
Jon Snow

Posted on

CSS Animation: Card Width expand on hover

#css #webdev #tutorial #animation

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

Card Width expand on hover

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); }
Enter fullscreen mode Exit fullscreen mode

We made a image gallery animation using this code snippet

Card Width expand on hover

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

Top comments (0)