.container {  
  width: 300px;  
  height: 200px;  
  position: relative;  
  overflow: hidden;  
  margin: 2px;  
  float: left;  

  }  

  .container a {  
  vertical-align: middle;  
  color: #fff;  
  text-decoration: none;  
  font-size: 18px;  
  font-family: Verdana;  
  font-weight: 100;  
  }  

  .container img {  
  width: 300px;  
  height: 200px;  
  }  

  .description {  
  padding-top: 30px;  
  height: 90px;  
  width: 120px;  
  background: #000;  
  opacity: 0.7;  
  filter: alpha(opacity=30); /* IE lt 8 */  
  -ms-filter: "alpha(opacity=30)"; /* IE 8 */  
  -webkit-transition: 1s;  
  -moz-transition: 1s; /* Firefox 4-15 */  
  -o-transition: 1s; /* Opera 10.5–12.00 */  
  transition: 1s; /* Firefox 16+, Opera 12.50+ */  
  position: absolute;  
  bottom: -150px;  
  left: -150px;  
  text-align: center;  
  border-radius: 50%;  
  -webkit-transform: rotate(0deg); /* Safari 3.1+, Chrome */  
  -moz-transform: rotate(0deg); /* Firefox 3.5-15 */  
  -ms-transform: rotate(0deg); /* IE9+ */  
  -o-transform: rotate(0deg); /* Opera 10.5-12.00 */  
  transform: rotate(0deg);  

  }  

  .container:hover .description {  
  bottom: 5px;  
  left: 5px;  
  -webkit-transform: rotate(360deg); /* Safari 3.1+, Chrome */  
  -moz-transform: rotate(360deg); /* Firefox 3.5-15 */  
  -ms-transform: rotate(360deg); /* IE9+ */  
  -o-transform: rotate(360deg); /* Opera 10.5-12.00 */  
  transform: rotate(360deg);  
  }  
  

<div class="container">  
  <img src="ССЫЛКА И IMG" alt="" class="start">  
  <div class="description">  
  <a href=""> Всплывающий текст </a>  
  </div>  
  </div>