Raddy Website Design & Development Tutorials

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 


<!DOCTYPE html>
<html lang="en">
    <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">
            <img src="images/image-1.jpg" alt="">
            <img src="images/image-2.jpg" alt="">
            <img src="images/image-3.jpg" alt="">
            <img src="images/image-4.jpg" alt="">


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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.