Красивый Hover эффект для изображения CSS3 - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Войти
Регистрация
Посетители за сегодня
Обратная связь
Опрос
Правила чата
Пользователи онлайн
−Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории
Комментарии
༒AДМИНИСТРАТОР༒
21-Декабря-2021
noНе выводит сообщения в чат.
Ответить
Vitalya
18-Апреля-2021
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Ответить
igor_ponyshkov
10-Апреля-2021
noЭТО МЕНЮ НЕ РАБОТАЕТ https://wampi.ru/image/RnPeLYV
Ответить
Milan_Shubin
01-Июля-2018
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
Ответить
Vitalya
01-Июля-2018
Приносим свои извинения, всё исправим...
Ответить
KaMoRkA.uCoz.com -- uCoz -- Скрипты
Красивый Hover эффект для изображения 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> 

Также нам нужно будет удалить затеняющий слой над изображением, чтобы изображение как бы проявлялось. Специально для каждого затеняющего слоя назначаем отдельные стили, чтобы вы могли видеть какими способами можно убирать эти слои. В итоге получился вот такой код CSS для hover эффекта на изображениях:

CSS
.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%; 
} 

Важно!

При копировании материала указывать ссылку на источник.

- 395
- 10-Октября-2016
- 0
Материал разместил:

Похожий материал
Похожего материала не найдено...
Статьи сайта
12-Ноября-2017 в 23:41:03
Рай для верстальщика: синхронизация окон браузеров
29-Июня-2017 в 12:30:13
Что такое информер и зачем нужен на сайте
29-Июня-2017 в 10:21:53
Ограничить длину заголовка и описание к материалу для uCoz
05-Марта-2017 в 12:54:01
Сокращаем "Описание" в вид материалов
01-Марта-2017 в 17:08:05
Не форматируется флешка? Решение есть