Bootstrap блоки с эффектом наведения / Блоки / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

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

Категория: Блоки

Bootstrap: 3, 4, 5

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

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

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

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

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

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

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

Рейтинг: 4.4 / 5 - 10 голосов

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

Авторство: //goo.gl/cPuCJD

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

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

Теги: Hover, Responsive, блок, адаптивный, hover effect, Bootstrap, bestjquery, Snippet, Block

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

Добавлено: 2018-07-30 в 19:40

Метка: 1566147714

⇄ ⇅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<style>
.box{
 overflow: hidden;
 box-shadow: 0 0 3px rgba(0,0,0,0.3);
 position: relative;
}
.box:before{
 content: "";
 width: 100%;
 height: 100%;
 background-image: repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(0,0,0,0.1) 10px,rgba(0,0,0,0.1) 20px);
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 opacity: 0;
 transition: all 0.3s ease 0s;
}
.box:hover:before{ opacity: 1; }
.box img{
 width: 100%;
 height: auto;
 transform: scale(1.2);
 transition: all 0.3s ease 0s;
}
.box:hover img{
 filter: sepia(100%) grayscale(100%) ;
 transform: scale(1);
}
.box .box-content{
 width: 70%;
 height: 100%;
 padding: 15px 0 0 15px;
 background: rgba(0,0,0,0.7);
 position: absolute;
 top: 0;
 left: -100%;
 transition: all 0.3s ease 0s;
}
.box:hover .box-content{ left: 0; }
.box .title{
 font-size: 20px;
 font-weight: 600;
 font-style: italic;
 color: #fff;
 letter-spacing: 1px;
 text-transform: uppercase;
 text-shadow: 0 0 2px #ea1e1f;
 margin: 0;
}
.box .post{
 display: inline-block;
 font-size: 14px;
 color: #fff;
 letter-spacing: 2px;
 text-transform: capitalize;
 transition: all 0.8s ease 0.3s;
}
.box .icon{
 padding: 0;
 margin: 0;
 list-style: none;
 text-align: center;
 position: absolute;
 top: 50%;
 right: -100%;
 z-index: 1;
 transform: translateY(-50%);
 transition: all 0.3s ease 0s;
}
.box:hover .icon{ right: 25px; }
.box .icon:after{
 content: "";
 width: 130%;
 height: 100%;
 background: rgba(234,30,31,0.7);
 position: absolute;
 top: 0;
 left: 50%;
 z-index: -1;
}
.box .icon li{
 display: block;
 margin: 10px 0;
}
.box .icon li a{
 display: block;
 width: 40px;
 height: 40px;
 line-height: 40px;
 background: #fff;
 font-size: 18px;
 color: #ea1e1f;
 box-shadow: 0 0 10px rgba(0,0,0,0.4) inset;
 transition: all 0.3s ease 0s;
}
.box .icon li a:hover{
 background: #ea1e1f;
 color: #fff;
 box-shadow: 0 0 10px #ea1e1f;
}
@media only screen and (max-width:990px){
 .box{ margin-bottom: 30px; }
}
</style>

<div class="container"><div class="row">

<div class="col-md-3 col-sm-6">
 <div class="box">
 <img src="https://bootstraptema.ru/images/demo/600x600/demo1.jpeg" alt="1">
 <div class="box-content">
 <h3 class="title">REKA</h3>
 <span class="post">VOLGA</span>
 </div>
 <ul class="icon">
 <li><a href="#"><i class="fa fa-search"></i></a></li>
 <li><a href="#"><i class="fa fa-link"></i></a></li>
 </ul>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="box">
 <img src="https://bootstraptema.ru/images/demo/600x600/demo2.jpeg" alt="2">
 <div class="box-content">
 <h3 class="title">REKA</h3>
 <span class="post">SUMA</span>
 </div>
 <ul class="icon">
 <li><a href="#"><i class="fa fa-search"></i></a></li>
 <li><a href="#"><i class="fa fa-link"></i></a></li>
 </ul>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="box">
 <img src="https://bootstraptema.ru/images/demo/600x600/demo3.jpeg" alt="3">
 <div class="box-content">
 <h3 class="title">REKA</h3>
 <span class="post">ANGARA</span>
 </div>
 <ul class="icon">
 <li><a href="#"><i class="fa fa-search"></i></a></li>
 <li><a href="#"><i class="fa fa-link"></i></a></li>
 </ul>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="box">
 <img src="https://bootstraptema.ru/images/demo/600x600/demo4.jpeg" alt="4">
 <div class="box-content">
 <h3 class="title">REKA</h3>
 <span class="post">OB</span>
 </div>
 <ul class="icon">
 <li><a href="#"><i class="fa fa-search"></i></a></li>
 <li><a href="#"><i class="fa fa-link"></i></a></li>
 </ul>
 </div>
 </div>

</div></div>