Learn a super cool effect using Flexbox in under 7min!

Raddy CSS Leave a Comment

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 *