html { background-color: #eaeaea; }  
   
  #mainwrapper {  
  font: 10pt normal Arial, sans-serif;  
  height: auto;  
  margin: 80px auto 0 auto;  
  text-align: center;  
  width: 660px;  
  }  

  #mainwrapper .box {  
  border: 5px solid #fff;  
  cursor: pointer;  
  height: 182px;  
  float: left;  
  margin: 5px;  
  position: relative;  
  overflow: hidden;  
  width: 200px;  
  -webkit-box-shadow: 1px 1px 1px 1px #ccc;  
  -moz-box-shadow: 1px 1px 1px 1px #ccc;  
  box-shadow: 1px 1px 1px 1px #ccc;  
  }  
   
  #mainwrapper .box img {  
  position: absolute;  
  left: 0;  
  -webkit-transition: all 300ms ease-out;  
  -moz-transition: all 300ms ease-out;  
  -o-transition: all 300ms ease-out;  
  -ms-transition: all 300ms ease-out;  
  transition: all 300ms ease-out;  
  }  

  #mainwrapper .box .caption {  
  background-color: rgba(0,0,0,0.8);  
  position: absolute;  
  color: #fff;  
  z-index: 100;  
  -webkit-transition: all 300ms ease-out;  
  -moz-transition: all 300ms ease-out;  
  -o-transition: all 300ms ease-out;  
  -ms-transition: all 300ms ease-out;  
  transition: all 300ms ease-out;  
  left: 0;  
  }  

  #mainwrapper #box-5.box .rotate-caption {  
  width: 170px;  
  height: 170px;  
  text-align: left;  
  padding: 15px;  
  top: 200px;  
  -moz-transform: rotate(-180deg);  
  -o-transform: rotate(-180deg);  
  -webkit-transform: rotate(-180deg);  
  transform: rotate(-180deg);  
  }  
   
  #mainwrapper .box .rotate {  
  width: 200px;  
  height: 400px;  
  -webkit-transition: all 300ms ease-out;  
  -moz-transition: all 300ms ease-out;  
  -o-transition: all 300ms ease-out;  
  -ms-transition: all 300ms ease-out;  
  transition: all 300ms ease-out;  
  }  

  #mainwrapper .box:hover .rotate {  
  background-color: rgba(0,0,0,1) !important;  
  -moz-transform: rotate(-180deg);  
  -o-transform: rotate(-180deg);  
  -webkit-transform: rotate(-180deg);  
  transform: rotate(-180deg);  
  }  
  

<div id="mainwrapper">  
  <div id="box-5" class="box">  
  <div class="rotate">  
  <img id="image-5" src="http://net-css.my1.ru/_ld/20/24766206.png"/>  
  <span class="caption rotate-caption">  
  <h3>Подпись с поворотом</h3>  
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,  
  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
  </span>  
  </div>  
  </div></div>