How to create paper corner fold effect on hover by using HTML and CSS?


The folding effect is quite attractive on the website, may you have seen on some websites when you hover on the paging layout it gets folded on the corner. The folding corner effect can be achieved by using HTML and CSS only. The below sections will guide you on how to create the animation. In this article, we will divide the article into two sections in the first section we will create the basic structure. In the second section, we will decorate the structure.

Creating Structure: In this section, we will use only HTML to create the structure where we will use the corner folding effect.

  • HTML Code: In this section we will create a basic div using the div tag giving it a class name.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      
    <head>
        <meta charset="utf-8">
        <title>
            Paper corner fold effect on hover 
            by using HTML and CSS
        </title>
    </head>
      
    <body>
        <center>
            <h1>
                GeeksforGeeks
            </h1>
            <b>
                Paper corner fold effect on hover 
                by using HTML and CSS
            </b>
            <div class="Fold">
                <h3>
                A Computer Science Portal for Geeks</h3>
            </div>
        </center>
    </body>
      
    </html>                    

    chevron_right

    
    

Design Structure: In this section, we will use only CSS to decorate the structure which is already created in the above section.

  • CSS Code: In this section, we will first style the basic div element without the fold effect, then to create the fold effect we will use the CSS ::after pseudo-element. that will be positioned on the top right corner of the div box, the top and right border are set to colours that match the background color of parent div element.The left and bottom border are then given a darker shade of the div background color, we will also use the hover selector to create the folding effect when we hover the mouse over the box.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
            h1 {
                color: green;
            }
              
            .Fold {
                position: absolute;
                left: 50%;
                top: 55%;
                transform: translate(-50%, -50%);
                width: 400px;
                height: 200px;
                background-color: #4EE73C;
            }
              
            h3 {
                margin: 20px;
                padding: 20px;
            }
              
            .Fold:after {
                position: absolute;
                content: '';
                right: 0;
                top: 0;
            }
              
            .Fold:hover:after {
                transition-duration: 1s;
                border-bottom: 50px solid black;
                border-right: 50px solid white;
            }
    </style>

    chevron_right

    
    

Final Solution: It is the combination of the above two coding sections, y combining the above section we have creted a folded corner effect on hover.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>
        Paper corner fold effect on hover 
        by using HTML and CSS
    </title>
    <style>
        h1 {
            color: green;
        }
          
        .Fold {
            position: absolute;
            left: 50%;
            top: 55%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 200px;
            background-color: #4EE73C;
        }
          
        h3 {
            margin: 20px;
            padding: 20px;
        }
          
        .Fold:after {
            position: absolute;
            content: '';
            right: 0;
            top: 0;
        }
          
        .Fold:hover:after {
            transition-duration: 1s;
            border-bottom: 50px solid black;
            border-right: 50px solid white;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>
            GeeksforGeeks
        </h1>
        <b>
            Paper corner fold effect on hover 
            by using HTML and CSS
        </b>
        <div class="Fold">
            <h3>
            A Computer Science Portal for Geeks</h3>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.