Эффект выдвижной панели с описанием изображения при наведении на него курсора мыши

При наведении указателя мыши на изображение, оно откликается чуть заметным увеличением размеров, появлением теней справа и снизу и с некоторой задержкой появляется анимированное описание панели в выдвижном окне. Панель может выдвигаться в разных направлениях (вверх, вниз, вправо или влево). Для создания эффекта используется только HTML и CSS. Эффект работает во всех современных браузерах.

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Начало выдвижения панели каждый раз происходит с опозданием на 0,5 секунды, за это в CSS отвечает свойство transition, тени добавляются к изображению, чтобы создать эффект приподнятости изображения, тени создаются с помощью свойства -moz-box-shadow.

2. А этот код скопируйте и расположите в разделе body:

<!-- Убедитесь, что каждый контейнер содержит правильные значения:  ширина / высота изображения-->
<br>
<!--снизу-->
<div class="imagepluscontainer" style="width:263px; height:199px; z-index:2">
<img src="img/stadium.jpg" alt="">
<div class="desc">
Capable of seating 50,000 spectators, the <a href="//en.wikipedia.org/wiki/Colosseum" target="_blank">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>


<br>
<!--слева-->
<div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
<img src="img/stadium.jpg" alt="">
<div class="desc leftslide">
Capable of seating 50,000 spectators, the <a href="//en.wikipedia.org/wiki/Colosseum" target="_blank">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>



<br><br>
<!--сверху-->
<div class="imagepluscontainer" style="width:263px; height:199px">
<img src="img/stadium.jpg" alt="">
<div class="desc upslide">
Capable of seating 50,000 spectators, the <a href="//en.wikipedia.org/wiki/Colosseum" target="_blank">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>



<br>
<!--справа-->
<div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
<img src="img/stadium.jpg" alt="">
<div class="desc rightslide">
Capable of seating 50,000 spectators, the <a href="//en.wikipedia.org/wiki/Colosseum" target="_blank">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>

Используемое изображение:

Сохраните это изображение в папку img, которая должна находиться в одной директории с demo-файлом. После проверки работы эффекта, изображение замените на своё. В коде в разделе body скорректируйте путь к вашему изображению.

Всё будет хорошо! Спасибо за внимание. Посещайте иногда мой сайт. Пока! L.M.