CSS
html {
width: 100%;
height: 100%;
}
body {
background: #f8f8f8;
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d6d6d6));
background: -webkit-radial-gradient(center, ellipse cover, #f8f8f8 0%, #d6d6d6 100%);
background: -webkit-radial-gradient(center ellipse, #f8f8f8 0%, #d6d6d6 100%);
background: radial-gradient(ellipse at center, #f8f8f8 0%, #d6d6d6 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#d6d6d6', GradientType=1);
}
.box {
width: 400px;
height: 200px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
.box .content {
overflow: hidden;
width: 400px;
height: 200px;
background: tomato;
position: relative;
}
.box .content img {
margin-top: -180px;
-webkit-transition: all 500ms;
transition: all 500ms;
}
.box .content:hover img {
opacity: 0.3;
margin-top: -170px;
-webkit-filter: blur(3px);
}
.box .content:hover .text1 {
left: 130px;
opacity: 1;
}
.box .content:hover .text2 {
left: 180px;
opacity: 1;
}
.box .content .text1 {
color: #fff;
font-size: 40px;
font-family: 'Racing Sans One', cursive;
position: absolute;
left: 330px;
top: 60px;
opacity: 0;
-webkit-transition: all 800ms cubic-bezier(0.000, 0.440, 0.000, 0.795);
transition: all 800ms cubic-bezier(0.000, 0.440, 0.000, 0.795);
-webkit-transition-timing-function: cubic-bezier(0.000, 0.440, 0.000, 0.795);
transition-timing-function: cubic-bezier(0.000, 0.440, 0.000, 0.795);
}
.box .content .text2 {
color: #fff;
font-size: 20px;
font-family: 'Racing Sans One', cursive;
position: absolute;
left: -100px;
top: 100px;
opacity: 0;
-webkit-transition: all 800ms cubic-bezier(0.000, 0.890, 0.630, 0.980);
transition: all 800ms cubic-bezier(0.000, 0.890, 0.630, 0.980);
-webkit-transition-timing-function: cubic-bezier(0.000, 0.890, 0.630, 0.980);
transition-timing-function: cubic-bezier(0.000, 0.890, 0.630, 0.980);
}
.box:before {
content: "";
width: 80%;
height: 8px;
bottom: 18px;
left: 13px;
z-index: -1;
background: #000;
position: absolute;
box-shadow: -10px 10px 20px #000;
-webkit-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.box:after {
content: "";
width: 80%;
height: 8px;
bottom: 18px;
right: 13px;
z-index: -1;
background: #000;
position: absolute;
box-shadow: 10px 10px 20px #000;
-webkit-transform: scale(1) rotate(5deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(5deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
