<!--HTML-->
  <link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700&subset=cyrillic,cyrillic-ext' rel='stylesheet' type='text/css'>
<center>  <div class="lurt1">
    <div class="lurt2">
            <div class="lurthov1"><div class="lurtimg"><div class="lurtname">theme name</div>
      <div class="lurtcit"><table><tr><td><b>рейтинг:</b> R</td><td><b>статус:</b> активен</td></tr></table></div>
  <img src="http://imgdepo.com/id/i9136005"></div></div>
      <div class="lurthov2"><div class="lurtdat"><dt>10/10/10</dt>и место</div>
      <div class="lurtsho"><div class="lurtsho2">
«У тебя есть немецкая форма?! Настоящая?!» — однажды изумился Лу, случайно её увидев и после не оставлял попыток в неё приодеть немца, у которого при любом упоминании национал-социалистического прошлого Германии включался синий экран смерти в глазах. Но Хэллоуин для того и Хэллоуин, чтобы играть в переодевание. Тем более, раз на подростка всё это такое сильное впечатление производит.
        активен</div>
       
</div>
<div class="lurtwho">
  Louis Desroches, Kurt Hauser</div></div></center>

 
    </div>  
  </div>
<style>
  .lurt1 {width: 500px;
  height: 250px;
  background: url(http://imgdepo.com/id/i9136197);
  transition: all 1.5s linear;
  overflow: hidden;}

  .lurtimg {width: 500px
  height: 250px;
    position: absolute;
}
  
  .lurtname {font-family: 'oswald', 'roboto condensed';
  position: absolute;
  color: #fff;
  width: 300px;
  text-align: center;
  padding-top: 105px;
  font-size: 20px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
  border-bottom: 1px dotted;
  line-height: 22px;
  margin-left: 100px}
  
    .lurtcit {font-family: 'roboto condensed';
  position: absolute;
  color: #fff;
  width: 300px;
  text-align: center;
  padding-top: 130px;
  font-size: 10px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
  line-height: 9px;
  margin-left: 100px;
  text-transform: lowercase;
    letter-spacing: 2px}
  
  .lurtdat {font-family: arial;
  font-size: 9px;
  background-color: rgba(255,255,255,0.4);
  width: 450px;
  height: 20px;
  position: absolute;
  margin-top: 31px;
  margin-left: 22px;
  text-align: center;
  line-height: 8px;
  padding: 2px;
  color: #444;
  letter-spacing: 1px}
  
  dt {font-family: georgia;
  font-weight: bold;
  color: #333;
  letter-spacing: 0;
  font-size: 10px}
  
    .lurtsho {font-family: verdana;
  font-size: 11px;
  background-color: rgba(255,255,255,0.4);
  width: 454px;
  height: 122px;
    margin-left: 22px;
    margin-top:64px;
      position: absolute;
}
  
  .lurtsho2 {width: 410px;
  height: 82px;  
  text-align: justify;
  overflow-y:auto;
  padding: 5px;
  margin-left: 15px;
  margin-top:10px;
  position: absolute;
  color: #222}
  
  .lurtwho {      position: absolute;
  font-family: arial;
  font-size: 8px;
  background-color: rgba(255,255,255,0.4);
  width: 450px;
  height: 20px;
  position: absolute;
  margin-top: 195px;
  margin-left: 22px;
  text-align: center;
  line-height: 19px;
  padding: 2px;
  color: #222;
  letter-spacing: 1px;
  text-transform: uppercase;
}
  .lurthov1 {  transition: all 1.5s  ease-in-out;}
  .lurthov2 {
  transform: translate(500px,0);
  position: relative;
    transition: all 1.5s  ease-in-out;}
  
  .lurt1:hover .lurthov1 {transform: translate(-500px,0)}
    .lurt1:hover .lurthov2 {transform: translate(0px,0)}
  </style>