Image folding effect.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fold Paper Image Hover Effects</title>
<link rel="stylesheet" href="fold.css">
<style type="text/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(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);
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-9378326636860315",
enable_page_level_ads: true
});
</script>
</head>
<body>
<?php include 'ads.php';?>
<div class="fold"></div>
</body>
</html>