<figure class="photo red">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample33.jpg" alt="sample33" />
<figcaption>
<h2>Jean <span> Myers</span></h2>
</figcaption>
<a href="#"></a>
</figure>
<figure class="photo blue"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample34.jpg" alt="sample34" />
<figcaption>
<h2>Lynn <span> Reyes</span></h2>
</figcaption>
<a href="#"></a>
</figure>
<figure class="photo"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample35.jpg" alt="sample35" />
<figcaption>
<h2>Tracy <span> Logan</span></h2>
</figcaption>
<a href="#"></a>
</figure>
/* Included color classes..
.red
.blue
.yellow
*/
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.photo {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
max-height: 220px;
width: 100%;
background: #000000;
color: #ffffff;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.photo * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
figure.photo img {
max-width: 100%;
position: relative;
opacity: 0.4;
}
figure.photo figcaption {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
figure.photo h2 {
position: absolute;
left: 40px;
right: 40px;
display: inline-block;
background: #000000;
-webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
padding: 12px 5px;
margin: 0;
top: 50%;
text-transform: uppercase;
font-weight: 400;
}
figure.photo h2 span {
font-weight: 800;
}
figure.photo:before {
height: 100%;
width: 100%;
top: 0;
left: 0;
content: '';
background: #ffffff;
position: absolute;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: rotate(110deg) translateY(-50%);
transform: rotate(110deg) translateY(-50%);
}
figure.photo a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.photo.blue {
background: #123851;
}
figure.photo.blue h2 {
background: #0a212f;
}
figure.photo.red {
background: #581a14;
}
figure.photo.red h2 {
background: #36100c;
}
figure.photo.yellow {
background: #7f5006;
}
figure.photo.yellow h2 {
background: #583804;
}
figure.photo:hover img,
figure.photo.hover img {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.photo:hover h2,
figure.photo.hover h2 {
-webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
figure.photo:hover:before,
figure.photo.hover:before {
-webkit-transform: rotate(110deg) translateY(-150%);
transform: rotate(110deg) translateY(-150%);
}
/* Demo purposes only */
html {
height: 100%;
}
body {
background-color: #212121;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
margin: 0;
height: 100%;
}