Block Bootstrap 3 Hover Effect / Блоки / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0

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

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

Для Bootstrap: 3

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

Язык: Русский

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

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

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

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

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

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

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

Авторство: bootstraptema.ru

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

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

Теги: адаптивный, Snippet, Effect, блок, сниппет, Bootstrap, Responsive, html, Block, Hover

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

Добавлено: 2016-05-13 в 16:23

Метка: 1581148881

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<style>
body{background:url(https://bootstraptema.ru/images/bg/bg-2.png)}
.box{
 position: relative;
 text-align: center;
 overflow: hidden;
}
.box .box-img{
 position: relative;
}
.box .box-img img{
 width: 100%;
 height: auto;
}
.box .box-img:before{
 content: "";
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.7);
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 transition: all 0.5s ease 0s;
}
.box:hover .box-img:before{
 opacity: 1;
}
.box .link{
 position: absolute;
 top:0;
 left:0;
 width: 100%;
 height:100%;
}
.box .link a{
 width: 40px;
 height: 40px;
 background: #fff;
 color: #333;
 position: relative;
 top:45%;
 opacity:0;
 font-size: 16px;
 line-height: 40px;
 margin-right: 5px;
 display: inline-block;
 transform: rotateZ(-360deg);
 transition:all 0.3s ease 0s;
}
.box .link a:hover{
 text-decoration: none;
 color:#fff;
 background: rgba(255,255,255,0.4);
}
.box:hover .link a{
 transform: rotateZ(0deg);
 opacity:1;
}
@media only screen and (max-width: 990px){
 .box{
 margin-bottom: 20px;
 }
}
</style>

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

<div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="box-img well">
 <img src="http://drawings-girls.ucoz.net/2015/05/devushka-elf-s-pirsingom-na-gube.jpg" alt="">
 </div>
 <div class="link">
 <a href="#" class="fa fa-plus"></a>
 <a href="#" class="fa fa-search"></a>
 <a href="#" class="fa fa-download"></a>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="box-img well">
 <img src="http://drawings-girls.ucoz.net/2015/05/sirenevaya-devushka.jpg" alt="">
 </div>
 <div class="link">
 <a href="#" class="fa fa-plus"></a>
 <a href="#" class="fa fa-search"></a>
 <a href="#" class="fa fa-download"></a>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="box-img well">
 <img src="http://drawings-girls.ucoz.net/2015/05/devushka-elf-sredi-aktinii.jpg" alt="">
 </div>
 <div class="link">
 <a href="#" class="fa fa-plus"></a>
 <a href="#" class="fa fa-search"></a>
 <a href="#" class="fa fa-download"></a>
 </div>
 </div>
 </div>

</div>
</div>