Open In App
Related Articles

How to create Image Folding Effect using HTML and CSS?

Improve Article
Improve
Save Article
Save
Like Article
Like

In this article, we are going to create an image folding effect below the main image. This is a simple project, we can achieve our target only by using HTML and CSS.

Approach:

  • Create the main div in which we are creating 4 list tags.
  • Use of nth-child() selector property to give different styles to different list items.

HTML Code:

  1. First, we create an HTML file (index.html).
  2. Then we link the CSS file that provides all the animation’s effect to our HTML.
     It is also placed inside <head> tag.
  3. Coming to the body section of our HTML code.
    • Firstly, we are giving heading to our page.
    • Then, we have to create an unordered list in which we have 5 list items that are further used to store the image.

index.html




<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>IMAGE FOLDING EFFECT</h1>
    <ul class="un-list">
        <li class="lis"></li>
        <li class="lis"></li>
        <li class="lis"></li>
        <li class="lis"></li>
    </ul>
</body>
</html>


CSS Code: CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.
In CSS, we have to remember the following points.

  • Restore all the browser effects.
  • Use classes and ids to give effects to HTML elements.
  • Use of nth-child() selector property to give different styles to different list items.

style.css




*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body{
    background-color: rgb(9, 138, 57);
    list-style: none;
}
  
h1{
    display: flex;
    justify-content: center;
    margin: 2em;
}
  
.un-list{
    width: 40em;
    height: 20em;
    top: 50%;
    left: 50%;
    transform: translate(120%,50%);
    display: flex;
}
  
.lis{
    width: 100em;
    height: 30em;
    background-image: url(
    );
    background-size: cover;
}
  
.lis:nth-child(even){
    transform: skewY(-40deg);
}
  
.lis:nth-child(odd){
    transform: skewY(40deg);
}
  
.lis:nth-child(1){
    border-left: blanchedalmond 0.2em solid;
    background-position: 0;
    border-right: blanchedalmond 0.2em solid;
}
  
.lis:nth-child(2){
    background-position: -8em;
    border-right: blanchedalmond 0.2em solid;
}
.lis:nth-child(3){
    background-position: -16em;
    border-right: blanchedalmond 0.2em solid;
}
.lis:nth-child(4){
    background-position: -24em;
    border-right: blanchedalmond 0.2em solid;
}


Output:

image folding effect


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 17 Mar, 2021
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials