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

Оформите свои новости добавив им анимированных hover эффектов,в данной статье вы можете найти 5 готовых решений

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

Установка CSS
Код
<link rel="stylesheet" href="http://mvcreative.ru/example/10/HoverNews/hovernews.css"/>
Установка JS
вставить данный код перед </body>
Код
<script type="text/javascript" src="http://mvcreative.ru/example/10/HoverNews/hovernews.js"></script>
вид новостей
Вариант 1

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

Первый эффект

Код
<div class="he-wrap tpl1">
  <img src="HoverNews/1.jpg" alt=""/>
  <div class="he-view">
  <div class="sider-right a0" data-animate="fadeInRight">
  <a href="#" class="a1 zoom" data-animate="fadeInRight"></a>
  <a href="#" class="a2 undo" data-animate="fadeInRight"></a>
  <a href="#" class="a3 check" data-animate="fadeInRight"></a>
  <a href="#" class="a4 close" data-animate="fadeInRight"></a>
  </div>
  </div>
</div>

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

Код
<div class="he-wrap tpl1">
<img src="HoverNews/2.jpg" alt="">
<div class="he-view">
<div class="sider-right a0" data-animate="fadeInRight">
  <a href="#" class="a1 zoom" data-animate="rotateIn"></a>
  <a href="#" class="a2 undo" data-animate="rotateIn"></a>
  <a href="#" class="a3 check" data-animate="rotateIn"></a>
  <a href="#" class="a4 close" data-animate="rotateIn"></a>
</div>
</div>
</div>

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

Код
<div class="he-wrap tpl1">
<img src="HoverNews/3.jpg" alt="">
<div class="he-view">
<div class="sider-right a0" data-animate="fadeInRight">
  <a href="#" class="a1 zoom" data-animate="pendulum"></a>
  <a href="#" class="a1 undo" data-animate="pendulum"></a>
  <a href="#" class="a1 check" data-animate="pendulum"></a>
  <a href="#" class="a1 close" data-animate="pendulum"></a>
</div>
</div>
</div>
вид новостей
Вариант 2

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

Первый эффект

Код
<div class="he-wrap tpl2">
<img src="HoverNews/4.jpg" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<div class="center-bar">
  <a href="#" class="twitter a0" data-animate="elasticInDown"></a>
  <a href="#" class="facebook a1" data-animate="elasticInDown"></a>
  <a href="#" class="google a2" data-animate="elasticInDown"></a>
  <a href="#" class="in a3" data-animate="elasticInDown"></a>
</div>
</div>
</div>
</div>

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

Код
<div class="he-wrap tpl2">
<img src="HoverNews/5.jpg" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<div class="center-bar">
  <a href="#" class="twitter a0" data-animate="fadeInUp"></a>
  <a href="#" class="facebook a1" data-animate="fadeInUp"></a>
  <a href="#" class="google a2" data-animate="fadeInUp"></a>
  <a href="#" class="in a3" data-animate="fadeInUp"></a>
</div>
</div>
</div>
</div>

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

Код
<div class="he-wrap tpl2">
<img src="HoverNews/6.jpg" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<div class="center-bar">
  <a href="#" class="twitter a0" data-animate="rotateInLeft"></a>
  <a href="#" class="facebook a1" data-animate="rotateInLeft"></a>
  <a href="#" class="google a2" data-animate="rotateInLeft"></a>
  <a href="#" class="in a3" data-animate="rotateInLeft"></a>
</div>
</div>
</div>
</div>
вид новостей
Вариант 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>
вид новостей
Слайдер

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

Код
<div class="he-wrap">
<div class="he-sliders">
  <img class="a0" src="HoverNews/1.jpg" alt="">
  <img class="a0" src="HoverNews/2.jpg" alt="">
  <img class="a0" src="HoverNews/3.jpg" alt="">
</div>
<div class="he-view">
  <span class="he-pre a0" data-animate="fadeInLeft"></span>
  <span class="he-next a0" data-animate="fadeInRight"></span>
</div>
</div>
Понравилась статья? Перейди по рекламной ссылке ниже.
Раздел: Вид новостей ∫ Просмотров: 11436 ∫ 10.01.20134.8
Теги: новости, css3
» Оцени и добавь:
оцени статью
4.8
34 Комментариев Поделись своим мнением
#34 Написал BSide, 17.05.2015 20:30 Цитатнуть
Цитата n1k
Класс) Вопрос. А возможно ли сделать его без анимации, чтобы информация отображалась без наведения?

Возможно. Пишите в ЛС, помогу, если ещё нужно.
#33 Написал n1k, 23.04.2015 21:44
Цитатнуть
Класс) Вопрос. А возможно ли сделать его без анимации, чтобы информация отображалась без наведения? http://s017.radikal.ru/i430/1504/01/ad0fd43c268b.png
#32 Написал BSide, 05.08.2014 16:45 Цитатнуть
Цитата yaroslaw
в нижнем углу она у вас есть

Это я понял, и у вас она должна быть, нужно смотреть уже на самом сайте, где-то у вас непорядок.
#31 Написал yaroslaw, 03.08.2014 15:37
Цитатнуть
Цитата BSide
кнопки далее нет вообще

в нижнем углу она у вас есть
#30 Написал BSide, 30.07.2014 23:43 Цитатнуть
Цитата yaroslaw
кнопки далее нет вообще

Скиньте мне в ЛС ссылку на сайт, посмотрим в чём проблема.
#29 Написал yaroslaw, 29.07.2014 19:22
Цитатнуть
чот в 4 варианте кнопки далее нет вообще(((
#28 Написал BSide, 13.06.2014 12:44
Цитатнуть
Цитата karla-marx
как у вас на тестовой странице

В коде и на примере одно и то же. В любом случае он должен "подъезжать".
#27 Написал karla-marx, 12.06.2014 22:39
Цитатнуть
А можно ведь эффект как на первой картинке применить к блокам, чтобы получалось, как у вас на тестовой странице - контент появлялся постепенно и как бы "подъезжал"? как это сделать, подскажите пожалуйста)
#26 Написал Вова, 19.02.2014 12:43
Цитатнуть
Цитата cech
попробовать переустановить...

переустановил, не помогло...
Вы зашли на сайт как незарегистрированный пользователь. Чтобы получить полный доступ к сайту, дополнительные возможности, пройдите пятиминутную регистрацию, либо войдите на сайт под свои логином.
Что говорят заказчики?
Наша команда сотрудничает с MVC достаточно продолжительное время. Мы очень довольны результатами работы. Рекомендуем!
Брович Денис, Россия
Заказывал шаблон, всё на высшем уровне, все что я просил было выполненно, даже больше, перевыполнено. Всё получилось просто супер, сочетания цветов и красота просто поражают.
Велисов Юрий, Украина
Приятно работать! Отзывчивость, исполнительность, заинтересованность в результате и качестве работы! Спасибо!
Смолен Аленксандо, Украина