Эффект поворачивающихся блоков / Блоки / Сниппеты Bootstrap

Версия: v1.0

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2016-06-04 в 21:30

Метка: 1581147211

⇄ ⇅

.box{
 position: relative;
 overflow: hidden;
}
.box img{
 width: 100%;
 height: auto;
 transform-origin: left center 0;
 transform: perspective(400px) rotateY(0deg);
 transition: all 0.5s ease 0s;
}
.box:hover img{
 transform: perspective(400px) rotateY(90deg);
}
.box .box-content{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 background: #8867EB;
 padding: 30px 25px;
 text-align: center;
 transform-origin: right center 0;
 transform: perspective(400px) rotateY(-90deg);
 transition: all 0.5s ease 0s;
}
.box:hover .box-content{
 transform: perspective(400px) rotateY(0deg);
}
.box .title{
 font-size: 20px;
 font-weight: bold;
 color: #fff;
 margin-bottom: 20px;
 text-transform: capitalize;
}
.box .title:after{
 content: "";
 display: block;
 margin-top: 20px;
 border-bottom: 1px solid #fff;
}
.box .description{
 font-size: 14px;
 line-height: 23px;
 color: #fff;
}
@media only screen and (max-width: 990px){
 .box{ margin-bottom:15px; }
}
@media only screen and (max-width: 359px){
 .box .title{ margin: 10px 0; }
 .box .box-content{ padding: 15px; }
}
</style>

<div class="col-md-4 col-sm-6">
 <div class="box">
 <img src="http://drawings-girls.ucoz.net/2015/05/devushka-katolichka.jpg" alt="">
 <div class="box-content">
 <h3 class="title">Католичка</h3>
 <p class="description">Рисунок девушки для демо показа работы элемента в виде блока с эффектом поворота при наведении.</p>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="box">
 <img src="http://drawings-girls.ucoz.net/2015/05/devushka-shaman.jpg" alt="">
 <div class="box-content">
 <h3 class="title">Шаман</h3>
 <p class="description">Рисунок девушки для демо показа работы элемента в виде блока с эффектом поворота при наведении.</p>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="box">
 <img src="http://drawings-girls.ucoz.net/2015/05/misticheskaya-molodaya-devushka.jpg" alt="">
 <div class="box-content">
 <h3 class="title">Мистика</h3>
 <p class="description">Рисунок девушки для демо показа работы элемента в виде блока с эффектом поворота при наведении.</p>
 </div>
 </div>
 </div>

</div>
 </div>

BootstrapTema

Эффект поворачивающихся блоков

Скриншот

Подробнее

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

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

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