Paper or Image Folding Effect on Hover using HTML CSS

Add a touch of 3D realism to your web visuals with this stunning Paper or Image folding Effect using HTML and CSS. Whether you’re designing a photography gallery, portfolio site or landing page hero section, this folded strip image effect offers a fresh take on static visuals. Best part? No JavaScript is needed – just pure HTML and CSS magic!

HTML Structure

The HTML structure of this CSS folded image effect is incredibly lightweight and semantic. It utilizes <span> elements inside a container to create visual “folds” or “panels.”

<div class="main-container">
    <div class="folded-img">
        <span style="--i:0"></span>
        <span style="--i:2"></span>
        <span style="--i:4"></span>
        <span style="--i:6"></span>
        <span style="--i:8"></span>
    </div>
</div>

Each <span> represents a strip of the image. We use the --i custom property to calculate background positions dynamically. The odd and even indexed spans are skewed differently to mimic the appearance of a folded paper or curved photo. All of this sits neatly inside a .main-container for centralized layout control.

This setup ensures a responsive and reusable HTML layout for your CSS paper or image folding effect.

Styling with CSS

The CSS brings the folding illusion to life using skew transforms, dynamic background positions and box shadows to simulate depth.

:root {
    --width: 500px;
}

.main-container {
    display: flex;
    min-width: calc(var(--width) + 50px);
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}

.folded-img {
    width: var(--width);
    aspect-ratio: 1.92;
    display: flex;
    cursor: pointer;
}

.folded-img span {
    width: 20%;
    height: 100%;
    background-image: url('https://i.ibb.co/kgmy09j/img.jpg');
    background-size: cover;
    transition: 0.5s ease-in-out;
    box-shadow: inset 20px 0 50px rgba(0, 0, 0, .5);
    background-position: calc(var(--i)*-50px);
}

.folded-img span:nth-child(odd) {
    transform: skewY(12deg);
}

.folded-img span:nth-child(even) {
    transform: skewY(-12deg);
}

.folded-img:hover span {
    transform: none;
    box-shadow: none;
}

• The .folded-img container holds 5 spans, each taking up 20% of the width to form equal parts of the image.
• background-position is dynamically set using the --i value to align the image segments perfectly.
• Skew effects (skewY) and inset shadows on each strip simulate the illusion of folding.
• On hover, all transformations and shadows are removed, smoothly restoring the full image.

This Paper or Image folding effect is lightweight and perfect for interactive UI design without bloating your site with JavaScript.

This folding image effect on hover in CSS offers an eye-catching transition that enhances any image showcase, blog post preview or product gallery. With just HTML and CSS, you can achieve a polished, animated foldout look that feels modern and dynamic.

Live Preview