Вид новостей, вид новостей для uCoz, вид материалов новостей, css3 анимация, css3 эффекты

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>
Понравилась статья? Перейди по рекламной ссылке ниже.
Раздел: Вид новостей ∫ Просмотров: 10577 ∫ 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 достаточно продолжительное время. Мы очень довольны результатами работы. Рекомендуем!
Брович Денис, Россия
Заказывал шаблон, всё на высшем уровне, все что я просил было выполненно, даже больше, перевыполнено. Всё получилось просто супер, сочетания цветов и красота просто поражают.
Велисов Юрий, Украина
Приятно работать! Отзывчивость, исполнительность, заинтересованность в результате и качестве работы! Спасибо!
Смолен Аленксандо, Украина