Галерея изображений с увеличением в CSS
 | |
| Решили красиво оформит изображение, то этот эффект увеличение картинки сделает более оригинальный вид на сайте, что выполнено на чистом CSS3. Где в оригинальном способе внесет небольшие эффекты для изображения, то этот трюк отлично подойдет для реализации на сайте. Ведь изначально все настроено на изображение, которое идет немного прозрачное, но корректно просматривается рисунок. Но только стоит навести на его клик, как оно предоставляется в оригинальном видеть по своим формам, где задействуем в использование анимацию, что подключена на CSS3. А это присутствие теней и свойство "transform". Где пользователь или гости сайта увидят красивое увеличение, и получится такой вид, что картинка плавно надвигаемый на вас, вообще по эффектам сделано хоть просто, но все показано изящно. Такой простой эффект можно применять на различном элементе дизайна, где присутствует изображение, вам нужно подключить класс и настроить, на сколько оно должно увеличиваться и другие факторы. Ведь очень много современного дизайна, что этот вариант отлично впишется в основу. Как пример при проверке на работоспособность эффектов:  Приступаем к установке: HTML Код <div class="kemponem-gevelopinsad"> <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/gsaheyt.jpg" /> <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/mrdsacv.jpg" /> <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/uredsag.jpg" /> <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/mugjkdfs.jpg" /> <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/loperdsa.jpg" /> <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/lasthnjk.jpg" /> </div> CSS Код .kemponem-gevelopinsad img{ -webkit-transform:scale(0.7); -moz-transform:scale(0.7); -o-transform:scale(0.7); -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; opacity: 0.8; margin: 0 8px 3px 0; cursor: pointer; } .kemponem-gevelopinsad img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); box-shadow:0px 0px 28px gray; -webkit-box-shadow:0px 0px 28px gray; -moz-box-shadow:0px 0px 28px gray; opacity: 1; } Но здесь нужно понимать, что не на все картинку нужно прописывать, здесь решает веб-разработчик, но на основные, как новости или то, что нужно больше просмотров, то этот эффект вероятно увидеть, плюс он создан на чистом CSS, что совершенно не будет нагрузки на ресурс. Важно: Здесь нужно отметить, что материал корректно работает и показывает в Chrome, Safari 4+, Opera 9.5+, FF 4+. А вот в браузере IE анимации не поддерживаются, и в этом моменте показ эффекте выводится не полностью. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |