Как создать hover эффект для изображения используя CSS3


Дорогие друзья, сегодня хочу поделиться с вами интересным CSS эффектом, который вы легко можете применить при работе над своими проектами. Назвал я его hover эффект для изображения используя CSS3. Сегодня попробуем несколько разнообразить наши изображения. Придадим им немного динамики. это очень оживит ваш сайт. Суть эффекта в том, чтобы заставить изображение немного увеличиваться в размере, при наведении на него курсора мыши. Изображение будет как бы выплывать над страницей. Смотрится этот эффект очень хорошо. Итак, как всегда мы не будем использовать ничего, кроме CSS3.

Создаем интересный hover эффект для изображений используя CSS3.

Раньше для достижения такого результата нам бы пришлось использовать jquery. Сейчас же CSS3 позволяет делать это легко и красиво. Но здесь правда есть одно но. Эффект будет работать только на браузерах поддерживающих спецификацию CSS3. А значит на всех последних браузерах.

Вот как выглядит этот эффект:

hover эффект для изображений используя CSS3

Рабочий вариант эффекта.

Вы можете посмотреть трансформацию ссылок при помощи CSS3, перейдя по ссылке ниже:

Посмотреть демо

Не забудьте, что вы должны проверять работоспособность эффекта в последней версии вашего браузера, который должен поддерживать CSS3 и HTML5. Хотя здесь мы используем только CSS3.

 

Как это сделать?

Для этого эффекта нам нужно будет создать структуру в HTML и назначить блокам соответствующие стили в CSS.

HTML

В качестве HTML элементов используем блок для изображения и блок для слоя над этим изображением, который будет плавно исчезать при наведении мыши. Вот примерная структура нашего блока изображений:

<div class='images' id='image1'> <div class='layer'></div> <img src='images/picture.jpg' alt="" width="200" height="200" border="0" /> </div> <div class='images' id='image2'> <div class='layer'></div> <img src='images/picture.jpg' alt="" width="200" height="200" border="0" /> </div> <div class='images' id='image3'> <div class='layer'></div> <img src='images/picture.jpg' alt="" width="200" height="200" border="0" /> </div> <div class='images' id='image4'> <div class='layer'></div> <img src='images/picture.jpg' alt="" width="200" height="200" border="0" /> </div> 

CSS3

В стилях мы будем использовать свойство трансформации(Transform). А именно увеличение масштаба. В нормальном состоянии размеры изображений 100%. При наведении мыши, изображение увеличивается на 120%. Трансформацию сделаем плавной и зададим длительность эффекта 0.5 сек. Это время за которое изображение будет переплывать из одного состояния в другое. Назначим эти свойства для различных браузеров, таких как Opera, FireFox, Chrome и других поддерживающих CSS3.Также нам нужно будет удалить затеняющий слой над изображением, чтобы изображение как бы проявлялось. Я специально для каждого затеняющего слоя назначил отдельные стили, чтобы вы могли видеть какими способами можно убирать эти слои. В итоге получился вот такой код CSS для hover эффекта на изображениях:

.images{ float:left; margin: 20px; -webkit-transform:scale(1.0); -webkit-transition-duration: 0.5s; -moz-transform:scale(1.0); -moz-transition-duration: 0.5s; -o-transform:scale(1.0); -o-transition-duration: 0.5s; } .images:hover{ box-shadow:0px 0px 40px #ccc; -o-transform:scale(1.2); -o-box-shadow:0px 0px 40px #ccc; -moz-transform:scale(1.2); -moz-box-shadow:0px 0px 40px #ccc; -webkit-transform:scale(1.2); -webkit-box-shadow:0px 0px 40px #ccc; } .images .layer{ width: 200px; height: 200px; background-color:#000; position: absolute; opacity:0.5; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; } #image1:hover .layer{ width:0%; } #image2:hover .layer{ height:0%; } #image3:hover .layer { height:0%; margin-top:100px; } #image4:hover .layer{ margin-left:100px; margin-top:100px; height:0%; width:0%; } 

Вот и весь эффект. Остается только проверить работоспособность его в браузере. Надеюсь вы сможете применить этот эффект в своих работах. Спасибо за внимание.

 

 

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

3 комментария

  1. Артём06/08/2015
  2. Гриша18/02/2011

Добавить коментарий

один + один =