Прозрачный эффект изображений на CSS3 - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 8
Гостей: 8
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Сейчас не кого не удивить эффектом прозрачности, который происходит при клике. Другое дело, разобрать как его сделать, что мы сделаем. Если говорить с первого изображение, то как видим здесь по умолчанию картинка сразу идет как нужно. И только навести курсор, так как она будет темнеть, и здесь от стилей зависит, на сколько, вообщем можно выставить. Переходим ко второй картинке, ее больше всего мы видим на интернет ресурсах. Это по умолчанию у нее сразу затемненный вид, и только мы наводим и он сразу автоматически делается светлой. А точнее приобретает свой оригинальный вид.

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

Первый вариант:

HTML
Code
<img src="http://zornet.ru/Aben/47c5-6.jpg" alt="Эффект прозрачности" width="377" height="196" class="opacity" />

В CSS
Code
.opacity {
-moz-transition: all 0.4s; 
-webkit-transition: all 0.4s;  
-ms-transition: all 0.4s;  
-o-transition: all 0.4s;  
transition: all 0.4s; 
opacity:1;
filter:alpha(opacity=100);
}
 
.opacity:hover {
opacity:0.5;
filter:alpha(opacity=50);
}



CSS второго варианта

.clarity {
opacity:0.5;
filter:alpha(opacity=50);   
}
 
.clarity:hover {
-moz-transition: all 0.4s; 
-webkit-transition: all 0.4s;  
-ms-transition: all 0.4s;  
-o-transition: all 0.4s;  
transition: all 0.4s; 
opacity:1;
filter:alpha(opacity=100);
}

Важно!

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

- 424
- 05-Ноября-2016
- 0
- 0
Материал разместил:

Похожий материал
Похожего материала не найдено...
Статьи сайта