CSS Magic: Image Folding Effect on Hover using HTML and CSS only

The folded image effect is a creative design technique that adds a unique and visually engaging touch to images on your website. In this tutorial, we'll explore how to achieve this effect using HTML and CSS. Whether you're a beginner looking to enhance your web development skills or an experienced developer seeking to add a distinctive flair to your projects, this tutorial has something for everyone.

Also Read: 3D cube using CSS only | 3D Cube Animation

HTML Structure

To create the folded image effect, we'll begin by setting up the HTML structure. This involves creating a main container that will hold the folded image spans. Each span represents a portion of the image, and when combined, they form the visually appealing folded effect.

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

We have a main container (.main-container) that holds our folded image effect. Adjust the id and other attributes as needed to fit into your existing project structure. Inside the main container, we've added a div with the class folded-img. This div will contain the individual spans representing different sections of the image.

Also Read: Fingerprint Scanning Animation using HTML and CSS only

We've included five span elements inside the folded-img div. These spans will be used to create the folded sections of the image. The link to an external stylesheet (styles.css) is included in the head section. We'll define our CSS styles there to keep our HTML clean and organized.

CSS Styling

In this section, we'll apply the necessary CSS styles to create the folded image effect. The key to achieving this effect is using skew transforms and adjusting background positions for each span.

: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 defines the styles for the container of the folded image. Adjust the width, aspect ratio, and cursor properties as needed. The span inside the folded-img container represents each section of the folded image. Set the background image to the path of your image and adjust the width and transition properties.

The :nth-child(odd) and :nth-child(even) selectors apply skew transformations and box shadows to create the folded effect. On hover, the transform and box-shadow are removed to reveal the unfolded image. Individual spans are positioned to create the folding effect.

By using the skewY transformation and box shadows on alternating spans, we created the illusion of a folded image. The transition effect on hover added a touch of interactivity, smoothly revealing the original image.

Feel free to customize the code to fit your specific design preferences. Experiment with different images, dimensions, and shadow settings to create unique folded image effects for your projects.

Download