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;
}Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
