xxxxxxxxxx1
<figure class="photo red">2
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample33.jpg" alt="sample33" />3
<figcaption>4
<h2>Jean <span> Myers</span></h2>5
</figcaption>6
<a href="#"></a>7
</figure>8
<figure class="photo blue"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample34.jpg" alt="sample34" />9
<figcaption>10
<h2>Lynn <span> Reyes</span></h2>11
</figcaption>12
<a href="#"></a>13
</figure>14
<figure class="photo"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample35.jpg" alt="sample35" />15
<figcaption>16
<h2>Tracy <span> Logan</span></h2>17
</figcaption>18
<a href="#"></a>19
</figure>xxxxxxxxxx1
/* Included color classes.. 2
.red 3
.blue 4
.yellow 5
*/6
7
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);8
figure.photo {9
font-family: 'Raleway', Arial, sans-serif;10
position: relative;11
overflow: hidden;12
margin: 10px;13
min-width: 220px;14
max-width: 310px;15
max-height: 220px;16
width: 100%;17
background: #000000;18
color: #ffffff;19
text-align: center;20
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);21
}22
23
figure.photo * {24
-webkit-box-sizing: border-box;25
box-sizing: border-box;26
-webkit-transition: all 0.4s ease-in-out;27
transition: all 0.4s ease-in-out;28
}29
30
figure.photo img {31
max-width: 100%;32
position: relative;33
opacity: 0.4;34
}35
36
figure.photo figcaption {37
position: absolute;38
top: 0;39
left: 0;40
bottom: 0;41
right: 0;42
}43
44
figure.photo h2 {45
position: absolute;46
left: 40px;47
right: 40px;48
display: inline-block;49
background: #000000;50
-webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);51
transform: skew(-10deg) rotate(-10deg) translate(0, -50%);52
padding: 12px 5px;53
margin: 0;54
top: 50%;55
text-transform: uppercase;56
font-weight: 400;57
}58
59
figure.photo h2 span {60
font-weight: 800;61
}62
63
figure.photo:before {64
height: 100%;65
width: 100%;66
top: 0;67
left: 0;68
content: '';69
background: #ffffff;70
position: absolute;71
-webkit-transition: all 0.3s ease-in-out;72
transition: all 0.3s ease-in-out;73
-webkit-transform: rotate(110deg) translateY(-50%);74
transform: rotate(110deg) translateY(-50%);75
}76
77
figure.photo a {78
left: 0;79
right: 0;80
top: 0;81
bottom: 0;82
position: absolute;83
z-index: 1;84
}85
86
figure.photo.blue {87
background: #123851;88
}89
90
figure.photo.blue h2 {91
background: #0a212f;92
}93
94
figure.photo.red {95
background: #581a14;96
}97
98
figure.photo.red h2 {99
background: #36100c;100
}101
102
figure.photo.yellow {103
background: #7f5006;104
}105
106
figure.photo.yellow h2 {107
background: #583804;108
}109
110
figure.photo:hover img,111
figure.photo.hover img {112
opacity: 1;113
-webkit-transform: scale(1.1);114
transform: scale(1.1);115
}116
117
figure.photo:hover h2,118
figure.photo.hover h2 {119
-webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);120
transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);121
}122
123
figure.photo:hover:before,124
figure.photo.hover:before {125
-webkit-transform: rotate(110deg) translateY(-150%);126
transform: rotate(110deg) translateY(-150%);127
}128
129
130
/* Demo purposes only */131
html {132
height: 100%;133
}134
body {135
background-color: #212121;136
display: flex;137
justify-content: center;138
align-items: center;139
flex-flow: wrap;140
margin: 0;141
height: 100%;142
}1
1
Console errors: 0