» »

Красивый эффект на картинку на чистом CSS3

Красивый эффект на картинку на чистом CSS3

Это стильно сделанный эффект на картинки при помощи CSS3. Где при наведение курсора он появляется, что можно сделать на своем сайте. Это может быть как отдельная страница и там выставить Avatav пользователей, когда наведете, то появится его логин или ник, все это от вас зависит. какой оператор поставите.

Также сами можете придумать, где его использовать. возможно вид материала и комментариев на главном изображение. По умолчанию сделано в форме круга, так как там идет полоса, а потом за ней темно прозрачная форма появляется. Но все можно посмотреть на предоставленной демонстраций, где понять по материалу и его применение.

Приступаем к установке:

1. Скачиваем файл и потом что в нем находится, то делаем файловом менеджере папку css и все туда закидываем.

2. Находим нужную странице на портале и только после < /head > устанавливаем.

Код
<link rel="stylesheet" type="text/css" href="/css/ohover.css"/>


3. Остается установить скрипт на оформление картинки, что идет со стильным эффектом.

Код
<div class="example">  
<div class="row">  
<div class="row-2">  
<div class="item-hover circle effect1"><a href="#">  
<div class="spinner"></div>  
<div class="img"><img alt="img" src=  
"Ссылка на картинку"></div>  
<div class="info">  
<div class="info-back">  
<h3>Заголовок</h3>  
<p>Описание</p>  
</div>  
</div>  
</a></div>  
</div>

Здесь пишем заголовок, или как уже было сказано, можно поставить оператор, и можно кратко описать его.

Посматриваем DEMO на материал.

PS - Здесь сразу нужно понимать, что на участок class="item-hover circle effect1" - это номер эффекта, что можно выставлять, то количество, сколько нужно.
01.06.2017 Загрузок: 3 Просмотров: 537 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
iMadeas
iMadeas 02.06.2017 12:041
0
Не обязательно просто на картинку. Попробовал поэкспериментировать со старым сайтов, отлично подошло для вида материалов, вот красивый пример http://madeas.ru/minecraft/all/ два варианта.
Сопрано
Сопрано 02.06.2017 21:582
0
Ссылка битая, но видно, что не под одни авы можно сделан, на колонку вид материал подойдет.
iMadeas
iMadeas 03.06.2017 13:114
0
где же она битая? у людей работает, не надо грязи.
Kosten
Kosten 03.06.2017 14:505
0
Она не работала по клику, просто запитая втерлась в урл.
Kosten
Kosten 02.06.2017 22:133
0
Все верно, кажется в описание написал, но вот уже как пользователи сделали на вид материала или на информер.

Critic©
Critic© 25.06.2017 23:196
0
Эффект классный вот вопрос автору: Откуда он берет такие классные шаблоны скрипты и.т.д
Kosten
Kosten 25.06.2017 23:397
0
В сети много скриптов, просто не для юкоз нужно искать, для юкоз одни шаблоны и мини профиль можно найти, так как другие скрипты на конструктор отлично подходят.
avatar