Block Hover Rotate Effect / Блоки / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Bootstrap: 3, 4

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

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

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

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

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

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

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

Рейтинг: 4.1 / 5 - 11 голосов

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

Авторство: Посмотреть

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

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

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

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

Добавлено: 2017-03-13 в 13:14

Метка: 1567147379

⇄ ⇅

/* Block Code */
.box{
 position: relative;
 perspective: 1000px;
}
.box .box-img{
 transform: rotateY(0);
 transition: all 0.50s ease-in-out 0s;
}
.box:hover .box-img{
 transform: rotateY(-90deg);
}
.box .box-img img{
 width: 100%;
 height: auto;
}
.box .box-content{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 padding: 60px 20px;
 text-align: center;
 background: rgba(0,0,0,0.7);
 transform: rotateY(90deg);
 transition: all 0.50s ease-in-out 0s;
}
.box:hover .box-content{
 transform: rotateY(0);
}
.box .title{
 font-size: 20px;
 color: #fff;
 text-transform: uppercase;
}
.box .description{
 font-size: 14px;
 line-height: 24px;
 color: #fff;
}
.box .title:after,
.box .description:after{
 content: "";
 width: 80%;
 display: block;
 border-bottom: 1px solid #fff;
 margin: 15px auto;
}
.box .social-links{
 margin: 0;
 padding: 0;
 list-style: none;
}
.box .social-links li{
 display: inline-block;
 margin: 0 10px;
}
.box .social-links li a{
 font-size: 20px;
 color: #a6a6a6;
}
.box .social-links li a:hover{
 text-decoration: none;
 color: #fff;
}
@media only screen and (max-width: 990px) {
 .box{ margin-bottom:20px; }
}
@media only screen and (max-width: 479px) {
 .box .box-content{ padding: 20px; }
}
</style>

<div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="box-img">
 <img src="https://bootstraptema.ru/snippets/block/2017/rotatehover/1.jpg" alt="demo image 1">
 </div>
 <div class="box-content">
 <h4 class="title">Suvorov</h4>
 <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
 <ul class="social-links">
 <li><a href="#" class="fa fa-qq"></a></li>
 <li><a href="#" class="fa fa-weibo"></a></li>
 <li><a href="#" class="fa fa-weixin"></a></li>
 </ul>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="box-img">
 <img src="https://bootstraptema.ru/snippets/block/2017/rotatehover/2.jpg" alt="demo image 2">
 </div>
 <div class="box-content">
 <h4 class="title">Nahimov</h4>
 <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
 <ul class="social-links">
 <li><a href="#" class="fa fa-qq"></a></li>
 <li><a href="#" class="fa fa-weibo"></a></li>
 <li><a href="#" class="fa fa-weixin"></a></li>
 </ul>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="box-img">
 <img src="https://bootstraptema.ru/snippets/block/2017/rotatehover/3.jpg" alt="demo image 3">
 </div>
 <div class="box-content">
 <h4 class="title">Ushakov</h4>
 <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
 <ul class="social-links">
 <li><a href="#" class="fa fa-qq"></a></li>
 <li><a href="#" class="fa fa-weibo"></a></li>
 <li><a href="#" class="fa fa-weixin"></a></li>
 </ul>
 </div>
 </div>
 </div>

</div>
 </div>

BootstrapTema

Block Hover Rotate Effect

Скриншот

Подробнее

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

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

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