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

Версия: v1.0

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

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

Для Bootstrap: 3

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

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

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

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

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

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

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

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

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

Авторство: http://goo.gl/36ixZc

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

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

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

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

Добавлено: 2016-06-09 в 16:28

Метка: 1581146715

⇄ ⇅

.box{
 position: relative;
 overflow: hidden;
 box-shadow: 0 0 3px #808080;
}
.box .pic img{
 width: 100%;
 height: auto;
}
.pic:after{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.3);
}
.box .social-links{
 width: 100%;
 margin: 0;
 padding: 0;
 list-style: none;
 position: absolute;
 top: 30%;
 text-align: center;
 opacity: 0;
 transition: opacity 0.40s linear 0s ;
}
.box:hover .social-links{
 opacity: 1;
}
.box .social-links li{
 display: inline-block;
 margin: 0 5px;
}
.box .social-links li a{
 width: 30px;
 height: 30px;
 border-radius: 50%;
 line-height: 30px;
 color: #808080;
 text-align: center;
 background: #fff;
}
.box .social-links li a:hover{
 text-decoration: none;
}
.box .social-links li .fa-facebook:hover{
 color:#4867aa;
}
.box .social-links li .fa-google:hover{
 color:#ea4335;
}
.box .social-links li .fa-twitter:hover{
 color:#00abf1;
}
.box .over-layer{
 width: 100%;
 padding: 15px;
 background: #fff;
 position: absolute;
 bottom: -100%;
 left: 0;
 transition: bottom 0.40s linear 0s ;
}
.box:hover .over-layer{
 bottom: 0;
}
.box .post{
 margin:0;
 float: left;
}
.box .post a{
 font-size: 14px;
 color: #333;
}
.box .post a:hover{
 text-decoration: none;
 color: #568970;
}
.box .post small{
 display: block;
 margin-top: 5px;
 text-transform: capitalize;
}
.box .likes{
 float: right;
}
.box .likes a{
 display: inline-block;
 color: #808080;
 font-size: 14px;
 line-height: 35px;
}
.box .likes a:hover{
 text-decoration: none;
}
.box .likes a i{
 margin-right: 5px;
}
.box .likes a:hover i{
 color: #568970;
}
@media only screen and (max-width: 990px) {
 .box{ margin-bottom:20px; }
}
</style>

<div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="pic">
 <img src="http://drawings-girls.ucoz.net/2015/07/krasivaya-devushka-s-rasprostyortimi-rukami.jpg" alt=""/>
 </div>
 <ul class="social-links">
 <li><a href="#" class="fa fa-facebook"></a></li>
 <li><a href="#" class="fa fa-google"></a></li>
 <li><a href="#" class="fa fa-twitter"></a></li>
 </ul>
 <div class="over-layer">
 <h4 class="post">
 <a href="#">Sanya</a>
 <small>Neopredelit</small>
 </h4>
 <span class="likes"><a href="#"><i class="fa fa-thumbs-up"></i>3</a></span>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="pic">
 <img src="http://drawings-girls.ucoz.net/2015/07/lico-vostochnoi-devushki.jpg" alt=""/>
 </div>
 <ul class="social-links">
 <li><a href="#" class="fa fa-facebook"></a></li>
 <li><a href="#" class="fa fa-google"></a></li>
 <li><a href="#" class="fa fa-twitter"></a></li>
 </ul>
 <div class="over-layer">
 <h4 class="post">
 <a href="#">Kristiana</a>
 <small>Lico s ulibkoi</small>
 </h4>
 <span class="likes"><a href="#"><i class="fa fa-thumbs-up"></i>7</a></span>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="pic">
 <img src="http://drawings-girls.ucoz.net/2015/05/dve-devushki-i-letuchie-mishi.jpg" alt=""/>
 </div>
 <ul class="social-links">
 <li><a href="#" class="fa fa-facebook"></a></li>
 <li><a href="#" class="fa fa-google"></a></li>
 <li><a href="#" class="fa fa-twitter"></a></li>
 </ul>
 <div class="over-layer">
 <h4 class="post">
 <a href="#">Nastya</a>
 <small>Mechtatel Doo</small>
 </h4>
 <span class="likes"><a href="#"><i class="fa fa-thumbs-up"></i>9</a></span>
 </div>
 </div>
 </div>

</div>
 </div>

Всего комментариев: 2
Порядок вывода комментариев: 0 2 BootstrapТема • 19:46, 2016-07-11 Всего хорошего! 1 1 web4people • 19:43, 2016-06-17 Отличная вещь. Спасибо!!!! Сайт тоже отличный))))

BootstrapTema

Блоки с эффектом наведения

Скриншот

Подробнее

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

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