Flip Card

<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<style>
.big_container {
width: 501px;
margin: 0 auto;
}

#container_3173 {
position: relative;
width: 500px;
height: 350px;
z-index: 1;
overflow: hidden;
border-radius: 20px;
}
#container_3173 {
perspective: 1000;
}
#card_3173 {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit- transform-style: preserve-3d;
-webkit-transition: all .5s linear;
}
#container_3173:hover #card_3173{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
#cardback_3173
{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#card_3173:hover #cardback_3173 {
backface-visibility: visible;
-webkit-backface-visibility: visible;
}

#card_3173:hover .front {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.backtext {
max-height: 335px;
padding: 5px;
overflow: auto;
text-align: justify;
}

.face {
position: absolute;
width: 500px;
height: 350px;
border-radius: 20px;
color: #8f0d0d;
font-family: Roboto Condensed;
font-size: 12px;
}
.face a {
color: #2d3e93;
}
.face.back {
display: block;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
box-sizing: border-box;
background-color: #cacaca;
border-radius: 20px;
} 

.face h3 {
font-size: 20px;
text-align: center;
background: #FFF;
color: #000;
text-transform: uppercase;
padding: 3px;
}


</style>
<div class="big_container">
<div id="container_3173">
<div id="card_3173" class="avatar">
<div class="front face">
<img src="http://i59.tinypic.com/10pdi1h.jpg" />
</div>
<div id="cardback_3173" class="back face">
<div class="backtext">
<h3>Anything in the <*h3> code will look like this.</h3>
Words and things go here!
</div>
</div>
</div>
</div>
<div style="float: right;"><small><a href='https://rpginitiative.com/user/139-morrigan/'>Code by Morrigan of the Initiative</a></small></div>
</div>