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
Top comments (0)