HTML
<div class="perspective">
<div class="container">
<span class="title">Background</span>
<div class="background">
<span class="title">Base</span>
<div class="cont_blur">
<div class="blur"></div>
<span class="title">Gaussian blur</span>
</div>
<div class="color">
<span class="title">Color overlay</span>
</div>
<div class="noise">
<span class="title">Noise</span>
</div>
</div>
</div>
<span class="tip">Hover Me</span>
</div>
CSS
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
* {
margin: 0;
box-sizing: border-box;
}
html, body {
background: #f6f6f6;
}
.perspective {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 800px;
height: 450px;
-webkit-perspective: 1200;
perspective: 1200;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.perspective .tip {
position: absolute;
font-family: 'Roboto', sans-serif;
font-size: 55px;
font-weight: 300;
text-align: center;
color: rgba(20, 20, 20, 0.5);
top: 50%;
left: 50%;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
opacity: 1;
}
.perspective:hover .tip {
opacity: 0;
}
.perspective:hover .container {
-webkit-transform: rotateY(47deg) rotateX(0deg) rotateZ(-5deg);
transform: rotateY(47deg) rotateX(0deg) rotateZ(-5deg);
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s;
}
.perspective:hover .background .cont_blur {
-webkit-transform: translateZ(165px);
transform: translateZ(165px);
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s;
}
.perspective:hover .background .color {
-webkit-transform: translateZ(275px);
transform: translateZ(275px);
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s;
}
.perspective:hover .background .noise {
-webkit-transform: translateZ(385px);
transform: translateZ(385px);
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.perspective:hover .title {
opacity: 1;
}
.container {
position: absolute;
width: 800px;
height: 450px;
background: url("http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-desktop-wallpapers_04232231_304.jpg");
background-size: cover;
-webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.container .background {
width: 800px;
height: 450px;
margin-left: 120px;
margin-top: 50px;
box-shadow: 32px 45px 150px -15px rgba(0, 0, 0, 0.14), inset 0px 0px 30px rgba(50, 50, 50, 0.1);
background: white;
}
.container .background .cont_blur {
position: absolute;
width: inherit;
height: inherit;
z-index: 5;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s;
}
.container .background .cont_blur .blur {
position: absolute;
width: inherit;
height: inherit;
background: url("http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-desktop-wallpapers_04232231_304.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: -125px -50px;
-webkit-filter: blur(40px);
filter: blur(40px);
}
.container .background .color {
position: absolute;
width: 100%;
height: 100%;
background: rgba(240, 240, 240, 0.5);
z-index: 10;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s;
}
.container .background .noise {
position: absolute;
width: 800px;
height: 450px;
background: url("http://i.imgur.com/P0Kkvuv.png");
opacity: 1;
z-index: 15;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s;
border: none;
}
.title {
position: absolute;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 300;
color: #fff;
padding: 7px;
background: #222;
opacity: 0;
}
