CSS Flexbox Grow effect tutorial for beginners 🤓
In this video I will teach you how to create a super cool and simple grow/zoom effect using flexbox in under 7min!
I would really appreciate it if you sign up to my newsletter. It’s one email every Sunday to keep you up to date with what I’ve been up to, plus I’ll throw in some bonus stuff every now and then that I don’t post anywhere else 
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FlexBox Grow Effect</title>
<link rel="stylesheet" media="screen" type="text/css" href="css/styles.css">
</head>
<body>
<section>
<div>
<img src="images/image-1.jpg" alt="">
</div>
<div>
<img src="images/image-2.jpg" alt="">
</div>
<div>
<img src="images/image-3.jpg" alt="">
</div>
<div>
<img src="images/image-4.jpg" alt="">
</div>
</section>
</body>
</html>CSS
body {
margin: 0;
height: 100vh;
}
section {
display: flex;
height: 100vh;
max-width: 100vw;
}
section div {
display: flex;
flex: 1;
position: relative;
justify-content: center;
align-items: center;
overflow: hidden;
transition: all 0.5s ease-in-out;
cursor: pointer;
}
section div:hover {
flex-grow: 4;
}
section div img {
width: 100%;
height: 100vh;
object-fit: cover;
}Support This Work
If you found this guide helpful, consider supporting me with a small donation. Your contribution helps me keep these tutorials up to date and create more quality content.
Scan to donate
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
