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.
<!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.
<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.
<!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: