CSS Flexbox Grow effect tutorial for beginners 🤓

By Raddy in CSS ·

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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *