body { min-height:600px; background: linear-gradient( hsl(200,51%,40%), #E0D7A3); } .container{ width:300px; height:450px; margin:50px auto; perspective: 1000px; } .img{ width:100%; height:100%; background: url("http://www.jq22.com/img/cs/300x500-2.png"); background-size:100%; position:relative; transform-style: preserve-3d; transform-origin: center bottom; transition:all 1s; } .img:before{ content:attr(data-text); width:100%; height:50px; position:absolute; top:100%; left:0; background: url("http://www.jq22.com/img/cs/300x500-2.png") left bottom; background-size:100%; font-size: 1.6vw; font-family: Montserrat, Arial, sans-serif; color:#fff; text-shadow:1px 1px 3px #000; text-align:center; line-height:40px; transform-origin: center top; transform-style: preserve-3d; transition:all 1s transform; transform:rotateX(-80deg); } .container:hover .img{ transform: rotateX(75deg) translateZ(50px); } .img:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 100px 50px rgba(0, 0, 0, .1), inset 0 0 250px 250px rgba(0, 0, 0, .1); transition:all 1s; perspective: 1000px; transform-style: preserve-3d; transform-origin: center bottom; transform: rotateX(90deg) translateZ(-80px) scale(0.75); } .container:hover .img:after{ box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5); transform: rotateX(-5deg) translateZ(-80px) scale(1); }