Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

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

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Вид материалов и комментариев » Hover эффекты для ваших новостей

Hover эффекты для ваших новостей

Опубликовал: InfernO
Категория: Вид материалов и комментариев
Дата: 18 Июня 2025 в 20:35

0 голосов

Оформите свои новости добавив им анимированных hover эффектов,в данной статье вы можете найти 5 готовых решений.Данные решения вы можете применить для отображения новостей своего сайта, где будет выводиться постерная картинка, а при наведении будет появляться определенная информация, перейдем к разбору. Установка CSS

Код

Установка JS вставить данный код перед /body

Код

Вариант 1 Смысл в том что мы имеем картинку, при наведении на которую выплывает справа блок с иконками, иконки как и ссылки на них можно вставить абсолютно любые. Эффект на появления иконок также разные. Первый эффект

Код

Второй эффект

Код

Третий эффект

Код

Вариант 2 При наведении на картинку начинают появляться социальные иконки, здесь также у нас есть три эффекта появления социальных иконок. Первый эффект

Код

Второй эффект

Код

Третий эффект

Код

Вариант 3 При наведении на картинку выплывает блок с определенным текстом, это может быть название фотографии, либо ссылка на заголовко статьи. Первый эффект

Код

<div class="he-wrap tpl3"> <img src="HoverNews/1_1.jpg" alt=""> <div class="he-view"> <div class="info-bottom a0" data-animate="fadeInUp"> Квантовая механика — раздел теоретической физики </div> </div> </div>

Второй эффект

Код

<div class="he-wrap tpl3"> <img src="HoverNews/1_2.jpg" alt=""> <div class="he-view"> <div class="info-top a0" data-animate="fadeInDown"> Квантовая механика — раздел теоретической физики </div> </div> </div>

Третий эффект

Код

<div class="he-wrap tpl3"> <img src="HoverNews/1_3.jpg" alt=""> <div class="he-view"> <div class="info-fly a0" data-animate="flipInV"> Квантовая механика — раздел теоретической физики </div> </div> </div>

Вариант 4 Практически идеально подходит под новости сайта, имеется и заголовок и анонс и ссылка на саму новость. Первый эффект

Код

<div class="he-wrap tpl4"> <img src="HoverNews/7.jpg" alt=""> <div class="he-view"> <div class="bg"> <div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div> </div> <div class="content"> <h3 class="info-title a2" data-animate="fadeInDown">Квантовая механика</h3> <div class="detail a2" data-animate="fadeInUp">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</div> <a href="#" class="more a2" data-animate="fadeInRight">Далее</a> </div> </div> </div>

Второй эффект

Код

<div class="he-wrap tpl4"> <img src="HoverNews/8.jpg" alt=""> <div class="he-view"> <div class="bg"> <div class="a0" data-animate="fadeIn"></div><div class="a1" data-animate="fadeIn"></div><div class="a2" data-animate="fadeIn"></div><div class="a3" data-animate="fadeIn"></div><div class="a4" data-animate="fadeIn"></div> </div> <div class="content"> <h3 class="info-title a3" data-animate="rotateInLeft">Квантовая механика</h3> <div class="detail a4" data-animate="rotateInLeft">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</div> <a href="#" class="more a5" data-animate="fadeInUp">Далее</a> </div> </div> </div>

Третий эффект

Код

<div class="he-wrap tpl4"> <img src="HoverNews/9.jpg" alt=""> <div class="he-view"> <div class="bg"> <div class="a0" data-animate="fadeInUp"></div><div class="a1" data-animate="fadeInUp"></div><div class="a2" data-animate="fadeInUp"></div><div class="a3" data-animate="fadeInUp"></div><div class="a4" data-animate="fadeInUp"></div> </div> <div class="content"> <h3 class="info-title a3" data-animate="fadeInLeft">Квантовая механика</h3> <div class="detail a4" data-animate="fadeInRight">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.</div> <a href="#" class="more a5" data-animate="fadeInRight">Далее</a> </div> </div> </div>

Вариант 5 При наведении на картинку появляется заголовок и ссылка на детальную сраницу, в арсенале все также 3 эффекта появления. Первый эффект

Код

<div class="he-wrap tpl6"> <img src="HoverNews/1.jpg" alt=""> <div class="he-view"> <div class="bg a0" data-animate="fadeIn"> <h3 class="a1" data-animate="fadeInDown">Квантовая механика</h3> <a href="#" class="btn a2" data-animate="rotateInLeft"><span>Далее</span></a> </div> </div> </div>

Второй эффект

Код

<div class="he-wrap tpl6"> <img src="HoverNews/2.jpg" alt=""> <div class="he-view"> <div class="bg a0" data-animate="fadeIn"> <h3 class="a1" data-animate="fadeInDown">Квантовая механика</h3> <a href="#" class="btn a2" data-animate="bounceInLeft"><span>Далее</span></a> </div> </div> </div>

Третий эффект

Код

<div class="he-wrap tpl6"> <img src="HoverNews/3.jpg" alt=""> <div class="he-view"> <div class="bg a0" data-animate="fadeIn"> <h3 class="a1" data-animate="fadeInDown">Квантовая механика</h3> <a href="#" class="btn a2" data-animate="zoomIn"><span>Далее</span></a> </div> </div> </div>

Слайдер Данный блок вы можете использовать как отдельно, так и для вывода картинок новости.

Код

Ссылка на источник материала

Ссылка на ДЕМО

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 936 « Назад

Теги материала: Ваших, новостей, эффекты, для, hover

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Вид материалов и комментариев » Hover эффекты для ваших новостей

Hover эффекты для ваших новостей

Комментарии пользователей