Image hover effects / Эффекты / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Эффекты

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 7.11 Mb

Уникальный ID: 827

Количество символов:

Посмотрели: 6574 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-827-20

Скачали бесплатно: 312 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: http://miketricking.github.io/dist/

Информация: Пользователям

Информация: Правообладателям

Теги: эффект, images, Snippet, blocks, Effect, Блоки, сниппет, Bootstrap, html

Поделился: BootstrapТема

Добавлено: 2016-03-29 в 23:24

Метка: 1581264789

⇄ ⇅

<!DOCTYPE html>

<div class="container">

<div class="col-lg-12 text-center">
 <h1 class="page-header">Image hover effects</h1>
 <p class="titlep">Набор из 16 эффектов при наведении для блоков Bootstrap скачайте примеры в архиве</p>
 </div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover1">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/girl.jpg" alt="">
 <div class="overlay">
 <h2>Hover effect 1</h2>
 <button class="info" data-toggle="modal" data-target="#modal1">Show
 </button>
 </div> 
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover2">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p11.jpg" alt="">
 <div class="overlay">
 <h2>Hover effect 2</h2>
 <button class="info" data-toggle="modal" data-target="#modal2">Show
 </button>
 </div> 
 </div>
 </div>
 
 
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover3">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p13.jpg" alt="">
 <div class="overlay">
 <h2>Hover effect 3</h2>
 <button class="info" data-toggle="modal" data-target="#modal3">Show
 </button>
 </div> 
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover4">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p18.jpg" alt="">
 <div class="overlay">
 <h2>Hover effect 4</h2>
 <button class="info" data-toggle="modal" data-target="#modal4">Show
 </button>
 </div> 
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover42">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p20.jpg" alt="">
 <div class="overlay">
 <h2>Hover effect 4 v2</h2>
 <button class="info" data-toggle="modal" data-target="#modal4v2">Show
 </button>
 </div> 
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover1v2">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p23.jpg" alt="">
 <div class="overlay">
 <h2>Hover effect 1 v2</h2>
 <button class="info" data-toggle="modal" data-target="#modal1v2">Show
 </button>
 </div> 
 </div>
 </div>
 
 
 
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover5">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p10.jpg" alt="">
 <div class="overlay">
 <h2>Hover effect 5</h2>
 <button class="info" data-toggle="modal" data-target="#modal5">Show
 </button>
 </div> 
 </div>
 </div>
 
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover6">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/for.jpg" alt="">

<div class="overlay point" data-toggle="modal" data-target="#modal6">
 <h2>Hover effect 6</h2>
 <div class="rotate">
 <p class="group1">
 <a href="#"><i class="fa fa-twitter"></i></a>
 <a href="#"><i class="fa fa-facebook"></i></a>
 </p>
 <hr><hr>
 
 <p class="group2">
 <a href="#"><i class="fa fa-instagram"></i></a>
 <a href="#"><i class="fa fa-dribbble"></i></a>
 </p>
 </div>
 </div> 
 
 </div> 
 </div>
 </div>
 
 
 <div class="row">
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover7">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/hand.jpg" alt="">
 <div class="overlay point" data-toggle="modal" data-target="#modal7">
 <h2>Hover effect 7</h2>
 <p>
 <a href="#"><i class="fa fa-twitter"></i></a>
 <a href="#"><i class="fa fa-facebook"></i></a>
 <a href="#"><i class="fa fa-instagram"></i></a>
 <a href="#"><i class="fa fa-dribbble"></i></a>
 </p>
 </div>
 
 </div>
 </div>
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover8">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p9.jpg" alt="">
 <div class="overlay point" data-toggle="modal" data-target="#modal8">
 <h2>Hover effect 8</h2>
 <p class="set1">
 <a href="#"><i class="fa fa-twitter"></i></a>
 <a href="#"><i class="fa fa-facebook"></i></a>
 </p>
 <hr><hr>
 <p class="set2">
 <a href="#"><i class="fa fa-instagram"></i></a>
 <a href="#"><i class="fa fa-dribbble"></i></a>
 </p>
 </div> 
 </div>
 </div>
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover9">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p.jpg" alt="">
 <div class="overlay">
 <h2>Hover effect 9</h2>
 <button class="info" data-toggle="modal" data-target="#modal9">Show
 </button>
 </div> 
 </div>
 </div>
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover10">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p14.jpg" alt="">
 <div class="overlay">
 <button class="info" data-toggle="modal" data-target="#modal10">Show
 </button>
 <p class="icon-links">
 <a href="#"><span class="fa fa-twitter"></span></a>
 <a href="#"><span class="fa fa-facebook"></span></a>
 <a href="#"><span class="fa fa-instagram"></span></a>
 </p>
 
 </div> 
 </div>
 </div>
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover11">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p3.jpg" alt="">
 <div class="overlay">
 <h2>Effect 11</h2>
 <button class="info nullbutton" data-toggle="modal" data-target="#modal11">Show
 </button>
 </div> 
 </div>
 </div>
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover12">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p26.jpg" alt="">
 <div class="overlay">
 <h2>Effect 12</h2>
 <button class="info nullbutton" data-toggle="modal" data-target="#modal12">Show
 </button>
 </div> 
 </div>
 </div>
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover13">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/p4.jpg" alt="">
 <div class="overlay">
 <h2>Effect 13</h2>
 <button class="info nullbutton" data-toggle="modal" data-target="#modal13">Show
 </button>
 </div> 
 </div>
 </div>
 
 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
 <div class="hover ehover14">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/effect/2016/ihe/cac.jpg" alt="">
 <div class="overlay">
 <h2>lense effect</h2>
 <button class="info nullbutton" data-toggle="modal" data-target="#modal14">Show
 </button>
 </div> 
 </div>
 </div>
 </div>
 
 <hr>

</div>
 </div>

BootstrapTema

Image hover effects

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0