@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body{
  font-family:'Open Sans', sans-serif;
  color:#fff;
  position:relative;
}
.wrap{
  width:400px;
  height:300px;
  overflow:hidden;
  position:relative;
  background:#fff;
  margin:30px auto 0;
}
.front, .back{
  width:100%;
  height:100%;
}

/* Front */ 
.front{}
.front img{
  max-height:500px;
  width:auto;
}
.front p:before{
  font-family:"fontawesome";
  margin-right:5px;
  background:#3b536a;
  height:40px;
  width:40px;
  font-size:20px;
  display:block;
  text-align:center;
  float:left;
  border-right:1px solid #3b536a;
}


.front p{
  position:relative;
  top:-60px;
  background:#ff0000;
  line-height:40px;
  
  transition:all .4s;
}

/* back */
.back{
  opacity:0;
  background:#ff0000;
  position:absolute;
  overflow:hidden;
  top:0;
  left:0;
  
  transition:all .2s linear;
}
.back h1:before{
  font-family:"fontawesome";
  xbackground:#dddddd;
  font-size:46px;
  line-height:70px;
  width:70px;
  border-radius:50px;
  margin:0 auto;
  display:block;
  text-align:center;
  position:relative;
  overflow:hidden;
  margin-bottom:110px;
  top:-65px;
  box-shadow:0px 0px 0px 0px #3b536a;
  transform: scale(2.5);

  transition:all .3s ease;
}
.back h2:before{
  font-family:"fontawesome";
  xbackground:#dddddd;
  font-size:46px;
  line-height:70px;
  width:70px;
  border-radius:50px;
  margin:0 auto;
  display:block;
  text-align:center;
  position:relative;
  overflow:hidden;
  margin-bottom:110px;
  top:-65px;
  box-shadow:0px 0px 0px 0px #3b536a;
  transform: scale(2.5);

  transition:all .3s ease;
}
.back h1{
  text-align:center;
  font-size:30px;
  margin:10px 0;
  position:relative;
 
}
h2{
  text-align:center;
  font-size:25px;
  margin:10px 0;
  position:relative;
 
}
.back p{
  font-size:15px;
  text-align:center;
  margin:0 5px;
  position:relative;
  top:200px;
  
  transition:all .3s linear .2s;
}

/* effect */
.wrap:hover { cursor:pointer;}
.wrap:hover .front p{
  top:0;
}
.wrap .back:hover{
  opacity:1;
}
.wrap .back:hover h1:before,
.wrap .back:hover p{
  top:0;
  margin-bottom:0;
}
.wrap .back:hover h1:before{
  	transform: scale(1);
}