CSS Paper Folded Image Hover Effects

Hey there, I'm SA!

You can see all the codes (along with many more awesome options) by dates, and category filter in SA Coding Store !

CSS Paper Folded Image Hover Effects – Pure CSS 3D Folded Paper Effect

HTML Code Here :

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <title>CSS Paper Folded Image Hover Effects – Pure CSS 3D Folded Paper Effect </title>
</head>
<body>
    
<div class="fold"></div>

</body>
</html>

CSS Code Here :

 body
{
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.fold
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) skewY(0deg) rotateY(0deg);
    width: 120px;
    height: 200px;
    background: url(image.jpg);
    background-size: cover;
    background-position: center;
    border-top: 10px solid #ff6d3f;
    border-bottom: 10px solid #ff6d3f;
    box-sizing: border-box;
    transition: 1s;
}
.fold:hover
{
    transform: translate(-50%,-50%) skewY(15deg) rotateY(3deg);
}
.fold:before 
{
    content: '';
    position: absolute;
    width: 80%;
    height: calc(100% + 20px);
    background: url(image.jpg);
    background-size: cover;
    background-position: -4px 0;
    position: absolute;
    top: -10px;
    left: -80%;
    box-sizing: border-box;
    border-top: 10px solid #ff8a65;
    border-bottom: 10px solid #ff8a65;
    border-left: 10px solid #ff8a65;
    transform: perspective(1000px) skewY(0deg) rotateY(0deg);
    transform-origin: right;
    box-shadow: inset -15px 0 15px rgba(0,0,0,.1);
    transition: 1s;
}
.fold:hover:before 
{
    transform: perspective(1000px) skewY(-25deg) rotateY(0deg);
}
.fold:after
{
    content: '';
    position: absolute;
    width: 80%;
    height: calc(100% + 20px);
    top: -10px;
    right: -80%;
    background: url(image.jpg);
    background-size: cover;
    background-position: 88px 0;
    border-top: 10px solid #ff8a65;
    border-bottom: 10px solid #ff8a65;
    border-right: 10px solid #ff8a65;
    box-sizing: border-box;
    transform: perspective(1000px) skewY(0deg) rotateY(0deg);
    transform-origin: left;
    box-shadow: inset 15px 0 15px rgba(0,0,0,.1);
    transition: 1s;
} 
.fold:hover:after 
{
    transform: perspective(1000px) skewY(-25deg) rotateY(0deg);
}

Hey there, I'm SA!

Technology

CSS Paper Folded Image Hover Effects

CSS Paper Folded Image Hover Effects – Pure CSS 3D Folded Paper Effect

HTML Code Here :

CSS Code Here :

About SA

0 Comments:

Post a Comment

Archive

Author Info

Video Of Day