<!--HTML-->
<center>
<table>
 <tr>
   <td>
     <div id="alipz">
<div style="width: 190px; height: 230px;
background-image: url(http://placehold.it/190x230/);">
<div class="hoveraz">
 <div class="alpty">
NAME GAME
 </div>
 <div class="etyf">
Описание ваших отношений. Ваша история, как познакомились, может быть краткая информация о персонаже.
 </div>
</div></div></div>
   </td>
   
   <td>
      <div id="alipz">
<div style="width: 190px; height: 230px;
background-image: url(http://placehold.it/190x230/);">
<div class="hoveraz">
 <div class="alpty">
NAME GAME
 </div>
 <div class="etyf">
Описание ваших отношений. Ваша история, как познакомились, может быть краткая информация о персонаже.
 </div>
</div></div></div>
   </td>
   
   <td>
     <div id="alipz">
<div style="width: 190px; height: 230px;
background-image: url(http://placehold.it/190x230/);">
<div class="hoveraz">
 <div class="alpty">
NAME GAME
 </div>
 <div class="etyf">
Описание ваших отношений. Ваша история, как познакомились, может быть краткая информация о персонаже.
 </div>
</div></div></div>
   </td>
 </tr>
<tr>
   <td>
     <div id="alipz">
<div style="width: 190px; height: 230px;
background-image: url(http://placehold.it/190x230/);">
<div class="hoveraz">
<div class="alpty">
NAME GAME
</div>
<div class="etyf">
Описание ваших отношений. Ваша история, как познакомились, может быть краткая информация о персонаже.
</div>
</div></div></div>
   </td>
   
   <td>
      <div id="alipz">
<div style="width: 190px; height: 230px;
background-image: url(http://placehold.it/190x230/);">
<div class="hoveraz">
<div class="alpty">
NAME GAME
</div>
<div class="etyf">
Описание ваших отношений. Ваша история, как познакомились, может быть краткая информация о персонаже.
</div>
</div></div></div>
   </td>
   
   <td>
     <div id="alipz">
<div style="width: 190px; height: 230px;
background-image: url(http://placehold.it/190x230/);">
<div class="hoveraz">
<div class="alpty">
NAME GAME
</div>
<div class="etyf">
Описание ваших отношений. Ваша история, как познакомились, может быть краткая информация о персонаже.
</div>
</div></div></div>
   </td>
</tr>
</table>
</center>

<link href='https://fonts.googleapis.com/css?family=Oswald|Poppins' rel='stylesheet' type='text/css'>
<style>
 #alipz {
   width: 190px;
   height: 230px;
   overflow: hidden;
   border: 7px solid #FFFFFF;
   box-shadow: 4px 4px 4px #EBEBEB;
   border-radius: 3px;
   }
 
 .hoveraz {
   width: 190px;
   height: 230px;
   background-color: #FCFCFC;
   position: relative;
   top: 190px;
   -webkit-transition-duration: .5s;
   -moz-transition-duration: .5s;
   -o-transition-duration: .5s;
   transform: rotate(0deg);
   }
   
 #alipz:hover .hoveraz {
   top: 0px;
   transform: rotate(360deg);
   }
   
   .alpty {
     padding: 13px;
     height: 14px;
     color: #FFF;
     text-align: center;
     background-image: url('http://i.imgur.com/eYDxsWO.png');
     font-family: Oswald;
     font-size: 22px;
     line-height: 14px;
     text-transform: uppercase;
   }
   
   .etyf {
font-family: georgia;
 font-size: 9.5px;
     padding: 12px;
     height: 170px;
     margin: 0px auto;
     width: 161px;
     background-color: #FAFAFA;
     overflow: auto;
     color: #222;
     border-left: 5px solid #333;
     text-align: justify;
     line-height: 100%;
   }
   
   .txpf {
   font-family: courier new;
   font-size: 9px;
   text-transform: uppercase;
   color: #222;
   background-color: #FAFAFA;
   padding: 3px;
   }
   
   .twpt {
     font-family: Oswald;
     font-size: 25px;
     text-transform: uppercase;
     color: #FFF;
     background-image: url('http://i.imgur.com/eYDxsWO.png');
     padding: 24px;
     width: 575px;
   }
   
   .etyf b {
     font-size: 12px;
     color: #222;
     text-shadow: 2px 1px #D5D4D4;
   }
   
   .etyf i {
     font-size: 12px;
     color: #222;
     text-shadow: 2px 1px #D5D4D4;
   }
</style>