- Метки дополнения:
- web дизайн
- web 2.0
- css
- галерея
Простая CSS3 галерея изображений
CSS3 галерея с эффектом зума
Простая и изящная галерея изображений может быть получена с использованием анимации CSS3, теней и свойства "transform
". При наведении курсора мыши изображение будет увеличиваться и надвигаться на пользователя.
Код отлично работает в Chrome, Safari 4+, Opera 9.5+, FF 4+. В IE анимации не поддерживаются, поэтому эффект веден не полностью.
CSS:
<style type="text/css"> .hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: уменьшаем размер до 0.8*/ -moz-transform:scale(0.8); /*Mozilla: масштабирование*/ -o-transform:scale(0.8); /*Opera: масштабирование*/ -webkit-transition-duration: 0.5s; /*Webkit: длительность анимации*/ -moz-transition-duration: 0.5s; /*Mozilla: длительность анимации*/ -o-transition-duration: 0.5s; /*Opera: длительность анимации*/ opacity: 0.7; /*Начальная прозрачность изображений*/ margin: 0 10px 5px 0; /*Интервалы между изображениями*/ } .hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: увеличиваем размер до 1.2x*/ -moz-transform:scale(1.1); /*Mozilla: масштабирование*/ -o-transform:scale(1.1); /*Opera: масштабирование*/ box-shadow:0px 0px 30px gray; /*CSS3 тени: 30px размытая тень вокруг всего изображения*/ -webkit-box-shadow:0px 0px 30px gray; /*Webkit: тени*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla: тени*/ opacity: 1; } </style>
HTML:
<div class="hovergallery"> <img src="coconut.jpg" /> <img src="sunbreakthrough.jpg" /> <img src="desert.jpg" /> <img src="sunflower.jpg" /> <img src="forest.jpg" /> <img src="duck.jpg" /> </div>
5 последних добавленных файлов в рубрике"Полезное"
-
5 самых полезных расширений Google Chrome для веб-дизайнера и разработчика
В этой статье мы собрали список самых лучших и полезных расширений Google Chrome для веб-дизайнеров и разработчиков.
-
5 самых популярных плагинов WordPress для режима технического обслуживания
В этой статье мы хотели бы рассказать про самые лучшие плагины WordPress для режима технического обслуживания, которую вы можете включить на своем сайте в рамках обслуживания, разработки и так далее...
-
10 очень полезных плагинов для работы с виджетами на WP
Возможность использовать боковые виджеты добавляет удобства и функциональности в WordPress. Виджеты могут предоставлять широкий спектр функций, которые помогают пользователям находить необходимую информацию, делиться своим контентом и получать больше пользы от взаимодействия с сайтом. Помимо этого, в настоящее время существует больше способов, чем когда-либо, расширить возможности использования и внедрения виджетов на вашем сайте.
-
10+ лучших бесплатных шрифтов для кодирования и программирования
С этим постом я просто хотел выделить некоторые из лучших бесплатных моноширинных шрифтов, которые были оптимизированы для программирования, а также предложить некоторые основные указатели для выбора определенного шрифта.
-
10 бесплатных плагинов для WordPress для добавления и расширения карт
10 бесплатных плагинов WordPress, которые позволят вам как добавлять, так и расширять функциональность карты на вашем сайте.