In this blog post, we are trying something really interactive. Ever seen your notebook pages fold from the corners? Or did you just anytime fold it purposely to return to that page without much searching? Here’s the same thing we are going to try out with CSS.
To do this, we will use Button for ourselves. The basic idea behind this is the effect being shown on hover. We will give the styling for the folds and then the effect that will happen on hover. A time duration for the curl would be effective is mentioned. The transform and translation duration are doing the main job here.
Find the code below for 4 different types of paper curls :
Styling part is the most important part of the paper curls , Let’s look at the CSS code needed.
What we are doing here is that first we need to give relative position to the .hvr-cur.. class. You need to Add these pseudo elements :before or :after and give position absolute and fix it's position left, top/ right, top/left, bottom/right, bottom, to the curls. mention the height and width zero and on hover it will increase accordingly.