Loading





Форекс с Альпари

eTXT




Анкетка


Галерея изображений на CSS


Это галерея изображений, которая использует возможности и преимущества CSS3 анимации, а именно, параметры shadow и transform, в результате чего при наведении курсора мыши на изображение, появляется тень со всех сторон, картинка осветляется и увеличивается. Создаётся эффект приближения. Эффект работает во всех современных браузерах, кроме IE.


Демо-пример

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

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

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


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


<div align="center" class="hovergallery">
<img src="img/dog1.jpg" width="300" height="200" alt="изображение">
<img src="img/cat2.jpg" width="300" height="200" alt="изображение">
<img src="img/dog3.jpg" width="300" height="200" alt="изображение">
<img src="img/cat4.jpg" width="300" height="200" alt="изображение">
<img src="img/dog5.jpg" width="300" height="200" alt="изображение">
<img src="img/cat6.jpg" width="300" height="200" alt="изображение">
</div>





Демо-изображения:
изображение
изображение
изображение
изображение
изображение
изображение

Сохраните эти изображения в папку img, которая должна находиться в одной директории с файлом, в котором находится код галереи.

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка