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

30 Jun, 2021
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.
  
HTML
<!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>                   
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.  
CSS
<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>
Final Solution: It is the combination of the above two coding sections, y combining the above section we have created a folded corner effect on hover.  
HTML
<!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>
Output:  
 
simranarora5sos
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS