Подсказка - «шторка», поевляется в центре изображения. 
 Установка: 
 Вставляем код в CSS:  
Код
.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: 40px;  
  height: 110px;  
  width: 150px;  
  background: #000;  
  opacity: 0.7;  
  border-radius: 50%;  
  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;  
  top: 25px;  
  left: 75px;  
  text-align: center;  
  -webkit-transform: scale(0);  
  }  
  .container:hover .description {  
   
  -webkit-transform: scale(1);  
  -moz-transform: scale(1);  
  -ms-transform: scale(1);  
  -o-transform: scale(1);  
  transform: scale(1);  
  }
   Этот код в любое место Вашего сайта:  
Код
<div class="container">  
  <img src="ССЫЛКА И извображение" alt="" class="start">  
  <div class="description">  
  <a href=""> Всплывающий текст </a>  
  </div>  
  </div>
   ДЕМО
		
	 
 
 
    Мне Нравится 
 0