Главная » Файлы » Прочие скрипты » CSS |
Эффектное увеличение изображение с использованием CSS3
24.06.14, 09:04:44 | |
Всем привет. Как мы уже с вами заметили на сайте довольно много эффектов с изображениями. Но каждый код скрипта, по своему уникален, и непохож на другой. Поэтому предоставляю вашему вниманию еще одну работу с использованием css3. ДЕМО При наведении курсора, каждое изображение медленно увеличивается в размерах, потом возвращается в начальное состояние. Данный эффект красиво работает в браузерах с поддержкой CSS3 т как Google Chrome. Для данного эффекта используется изображение размером 400х133 px. Для уменьшения размера изображение с помощью CSS 300х100 px. Сам код CSS3 Код #container { width: 300px; margin: 0 auto; } #ex2 img{ height: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } #ex2 img:hover { height: 133px; width: 400px; margin-left: -50px; } Внутри блока вы можете прописать вот таким образом. Код <div id="containerEx2"> <div id="ex2"> <img src="/images/ex2.jpg"><br/> <img src="/images/ex2.jpg"><br/> <img src="/images/ex2.jpg"><br/> <img src="/images/ex2.jpg"> </div> </div> Или же попробовать поэкспериментировать, заключив код в информер, это уже на ваше усмотрение. Всем удачи Материал подготовил: Bizon Сайт урока: http://designshack.net | |
Просмотров: 436 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |