<!--HTML-->
<style>.fc-grid {
padding: 0;
list-style: none;
display: block;
text-align: left;
width: 500px;
background: none;
}
.fc-grid:after,
.fc-item:before {
content: '';
display: table;
}
.fc-grid:after {
clear: both;
}
.fc-grid li {
width: 150px;
height: 150px;
display: inline-block;
margin: 5px;
}
.fc-item {
width: 100%;
height: 100%;
position: relative;
cursor: default;
}
.fc-info-wrap{
position: absolute;
width: 110px;
height: 110px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
top: 20px;
left: 20px;
background: #f9f9f9;
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.fc-info{
position: absolute;
width: 110px;
height: 110px;
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.fc-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-position: center center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.fc-info .fc-info-back {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
background: #000;
}
.fc-img-1 {
background-image: url(http://i.imgur.com/Lxlw613.png);
}
.fc-img-2 {
background-image: url(http://i.imgur.com/RWJcKrC.png);
}
.fc-img-3 {
background-image: url(http://i.imgur.com/rF3J1Ik.png);
}
.fc-img-4 {
background-image: url(http://i.imgur.com/l30lLCp.png);
}
.fc-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 12px;
margin: 0 0px;
padding: 5px 0 0 0;
font-family: arial black;
}
.fc-info i {
color: #fff;
font-size: 10px;
}
.fc-info p {
margin-top: 5px;
color: #fff;
font-size: 10px;
line-height: 10px;
font-family: calibri;
text-transform: uppercase;
}
.fc-info p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.fc-info p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}
.fc-item:hover .fc-info-wrap {
box-shadow:
0 0 0 0 rgba(255,255,255,0.8),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.fc-item:hover .fc-info {
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-o-transform: rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);
}
hr {
width: 90%;
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(57, 57, 57, 0.75), rgba(0, 0, 0, 0));
}
</style>
<center>
<div style="background: #000; width: 330px; padding: 20px;">
<ul class="fc-grid">
<li>
<div class="fc-item fc-img-1">
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-1"></div>
<div class="fc-info-back">
<h3>Helena</h3>
<i>"Killer Clone"</i>
<p>
Project Leda<br>
Status: Alive<br>
</p>
<hr>
<p>
Played By:<br>
Tatiana Maslany
</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="fc-item fc-img-2">
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-2"></div>
<div class="fc-info-back">
<h3>Rudy</h3>
<i>"Scarface"</i>
<p>
Project Castor<br>
Status: Alive<br>
</p>
<hr>
<p>
Played By:<br>
Ari Millen
</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="fc-grid">
<li>
<div class="fc-item fc-img-3">
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-3"></div>
<div class="fc-info-back">
<h3>Styles Miller</h3>
<p>
Project Castor<br>
Status: Alive<br>
</p>
<hr>
<p>
Played By:<br>
Ari Millen
</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="fc-item fc-img-4">
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-4"></div>
<div class="fc-info-back">
<h3>Sarah Manning</h3>
<p>
Project Leda<br>
Status: Alive<br>
</p>
<hr>
<p>
Played By:<br>
Tatiana Maslany
</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div style="font-size: 10px; width: 400px; text-align: center; margin-top: 5px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=7482">♥</a></div>
</center>
