Shutters Blocks / Блоки / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Bootstrap: 3

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

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

Вес файла: 2.3 Kb

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

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

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

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

Прикреплён файл №2: /stuff/0-0-0-1894-20

Скачали бесплатно: 75 раз

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

Рейтинг: 3.8 / 5 - 12 голосов

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

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

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

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

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

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

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

Метка: 1567147233

⇄ ⇅

.ch-info-wrap {
 top: 20px;
 left: 20px;
 box-shadow: 
 0 0 0 20px rgba(255,255,255,0.2), 
 inset 0 0 3px rgba(115,114, 23, 0.8);
 
}
.ch-info {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
}
.ch-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 background-position: center center;
 -webkit-transition: all 0.6s ease-in-out;
 -moz-transition: all 0.6s ease-in-out;
 -o-transition: all 0.6s ease-in-out;
 -ms-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;
}
.ch-info .ch-info-front {
 -webkit-transform-origin: 50% 100%;
 -moz-transform-origin: 50% 100%;
 -o-transform-origin: 50% 100%;
 -ms-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 
 z-index: 100;
 box-shadow: 
 inset 2px 1px 4px rgba(0,0,0,0.1);
}
.ch-info .ch-info-back {
 background: rgba(230,132,107,0);
}

.ch-img-1 { 
 background-image: url(https://bootstraptema.ru/snippets/block/2017/shutters/1.jpg);
}

.ch-img-2 { 
 background-image: url(https://bootstraptema.ru/snippets/block/2017/shutters/2.jpg);
}

.ch-img-3 { 
 background-image: url(https://bootstraptema.ru/snippets/block/2017/shutters/3.jpg);
}
.ch-img-4{ 
 background-image: url(https://bootstraptema.ru/snippets/block/2017/shutters/4.jpg);
}
.ch-info h4{
 font-family: 'Niconne-Regular';
 color: #DF1E1C;
 letter-spacing: 2px;
 font-size: 30px;
 margin: 0 18px;
 padding: 40px 0 0 0;
}
.ch-info p {
 color: #464646;
 line-height:1.8em;
 padding: 10px 5px;
 font-style: italic;
 font-size: 13px;
}
.ch-item:hover .ch-info-front {
 -webkit-transform: rotate3d(1,0,0,-180deg);
 -moz-transform: rotate3d(1,0,0,-180deg);
 -o-transform: rotate3d(1,0,0,-180deg);
 -ms-transform: rotate3d(1,0,0,-180deg);
 transform: rotate3d(1,0,0,-180deg);
 
 box-shadow: 
 inset 0 0 5px rgba(255,255,255,0.2), 
 inset 0 0 3px rgba(0,0,0,0.3);
}
.ch-item:hover .ch-info-back {
 background: #fff;
}
@media (max-width: 1024px){
 .ch-grid li {
 margin: 0 15px;
 }
}
@media (max-width: 991px){
 .ch-grid li:nth-child(4) {
 margin-top: 30px;
 }
}
@media (max-width: 800px){
 .ch-grid li:nth-child(4) {
 margin-top: 30px;
 }
}
@media (max-width: 640px){
 .ch-grid li:nth-child(4) ,.ch-grid li:nth-child(3) {
 margin-top: 30px;
 }
}
@media (max-width: 480px){
 .ch-grid li {
 margin: 0 6px;
 }
 .ch-grid li:nth-child(4), .ch-grid li:nth-child(3) {
 margin-top: 12px;
 }
}
@media (max-width: 320px){
 .ch-grid li:nth-child(4), .ch-grid li:nth-child(3),.ch-grid li:nth-child(2) {
 margin-top: 15px;
 }
}
</style>
<div class="container">
<div class="row">

<ul class="ch-grid">
 <li>
 <div class="ch-item ch-img-1">
 <div class="ch-info-wrap">
 <div class="ch-info">
 <div class="ch-info-front ch-img-1"></div>
 <div class="ch-info-back">
 <h4>MIA</h4>
 <p>Lorem ipsum #1</p>
 </div>
 </div>
 </div>
 </div>
 </li>

<li>
 <div class="ch-item ch-img-2">
 <div class="ch-info-wrap">
 <div class="ch-info">
 <div class="ch-info-front ch-img-2"></div>
 <div class="ch-info-back">
 <h4>KITH</h4>
 <p>Lorem ipsum #2</p>
 </div>
 </div>
 </div>
 </div>
 </li>

<li>
 <div class="ch-item ch-img-3">
 <div class="ch-info-wrap">
 <div class="ch-info">
 <div class="ch-info-front ch-img-3"></div>
 <div class="ch-info-back">
 <h4>LUBA</h4>
 <p>Lorem ipsum #3</p>
 </div>
 </div>
 </div>
 </div>
 </li>

<li>
 <div class="ch-item ch-img-4">
 <div class="ch-info-wrap">
 <div class="ch-info">
 <div class="ch-info-front ch-img-4"></div>
 <div class="ch-info-back">
 <h4>GLOBUS</h4>
 <p>Lorem ipsum #4</p>
 </div>
 </div>
 </div>
 </div>
 </li>

</ul>

</div>
</div>

BootstrapTema

Shutters Blocks

Скриншот

Подробнее

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

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

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