Описание изображения на мыши наведите указатель мыши, как ссылка

Question

Я хочу добавить текст в изображение на изображениях моего сайта; Когда курсор мыши пойдет на изображение, покажите текст об этом изображении. Я хочу добавить описание об этом изображении. Но я хочу коробку быть как есть на этом сайте: http://libeskind.com/work/ Пожалуйста, см. Ссылку и скажите мне, как я могу сделать это?

Я хочу, чтобы быть столь же, как в качестве примера ссылки Спасибо всем

Answer 1

Это легкая работа проверить мой пример, я только что сделал простой пример, я не добавляемый перехода в качестве я думаю, что это поможет вам в обучении, попытайтесь понять код, это действительно легко.

.imgc{width:100px;} 
 
.imgc img{height:200px} 
 
.imgc p {position:absolute;transition:1s all;padding:10px;background:#ddd;width:240px;display:none;margin-top:-20px} 
 
.imgc:hover > p{display:block;}

<div class='imgc'> 
 
    <img src='http://libeskind.com/wp-content/uploads/aerial-view-c-guenter-schneider-555x426.jpg' /> 
 
    
 
    <p>Hello World</p> 
 
    </div>