Forked from Dudley Storey and made platypus friendly.
Derived from a technique on CodePlayer but made responsive, with better semantic markup, fewer pseudo-elements, and less CSS. Photograph found on Google Image Search
Forked from Dudley Storey and made platypus friendly.
Derived from a technique on CodePlayer but made responsive, with better semantic markup, fewer pseudo-elements, and less CSS. Photograph found on Google Image Search
<div onclick=""> | |
<figure> | |
<figcaption>Platypus, by Google Image Search</figcaption> | |
</figure> | |
</div> |
@import url(http://fonts.googleapis.com/css?family=Montserrat); | |
* { | |
margin: 0; padding: 0; | |
box-sizing: border-box; | |
} | |
html { height: 600px; min-height: 150%; } | |
body { | |
min-height: 100%; | |
background: linear-gradient( hsl(80,51%,8%), #E0D7A3); | |
} | |
div { | |
perspective: 1000px; | |
width: 33%; | |
margin: 0 auto; | |
margin-top: 3rem; | |
} | |
figure { | |
margin: 0; | |
width: 100%; | |
height: 29.5vw; | |
background: url("http://static1.wikia.nocookie.net/__cb20140123214424/cryptidz/images/a/a3/Platypus2.jpg"); | |
background-size: 100%; | |
transform-origin: center bottom; | |
transform-style: preserve-3d; | |
transition: 1s transform; | |
background-repeat: no-repeat; | |
} | |
figure figcaption { | |
width: 100%; | |
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://static1.wikia.nocookie.net/__cb20140123214424/cryptidz/images/a/a3/Platypus2.jpg"); | |
background-size: 100%; height: 50px; | |
background-repeat: no-repeat; | |
background-position: bottom; | |
color: #fff; | |
position: relative; top: 25.5vw; | |
transform-origin: center top; | |
transform: rotateX(-89.9deg); | |
font-size: 1.2vw; | |
font-family: Montserrat, Arial, sans-serif; | |
text-align: center; | |
line-height: 3; | |
} | |
figure:before { | |
content: ''; | |
position: absolute; top: 0; left: 0; | |
width: 100%; height: 100%; | |
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1); | |
transition: 1s; | |
transform: rotateX(95deg) translateZ(-80px) scale(0.75); | |
transform-origin: inherit; | |
} | |
div:hover figure { | |
transform: rotateX(75deg) translateZ(5vw); | |
} | |
div:hover figure:before { | |
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); | |
} | |
@media screen and (max-width: 800px) { | |
div { width: 50%; } | |
figure { height: 45vw; } | |
figure figcaption { | |
top: 39vw; | |
font-size: 2vw; | |
} | |
} | |
@media screen and (max-width: 500px) { | |
div { | |
width: 80%; | |
margin-top: 1rem; | |
} | |
figure { | |
height: 70vw; | |
} | |
figure figcaption { | |
top: 62vw; | |
font-size: 3vw; | |
} | |
} |