Fold Paper Image Hover Effect Code:
1.index.html:
<!DOCTYPE html> <html> <head> <title>Fold Paper Image Hover Effect</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="fold"></div> </body> </html>
2.style.css:
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(7.png); background-size: cover; background-position: center; border-top: 10px solid red; border-bottom: 10px solid red; 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(7.png); background-size: cover; background-position: -9px 0; top: -10px; left: -80%; box-sizing: border-box; border-top: 10px solid red; border-bottom: 10px solid red; border-left: 10px solid red; transform: perspective(1000px) skewY(-25deg) rotateY(-90deg); transform-origin: right; box-shadow: inset -15px 0 15px rgba(0,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); background: url(7.png); background-size: cover; background-position: 98px 0; top: -10px; right: -80%; box-sizing: border-box; border-top: 10px solid red; border-bottom: 10px solid red; border-right: 10px solid red; transform: perspective(1000px) skewY(-25deg) rotateY(-90deg); transform-origin: left; box-shadow: inset 15px 0 15px rgba(0,0,0,0.1); transition: 1s; } .fold:hover::after { transform: perspective(1000px) skewY(-25deg) rotateY(0deg); }
