BaguetteBox.js / Улучшение / Плагины Bootstrap

Версия: v1.8.2

Каталог: Плагины Bootstrap

Категория: Улучшение

Для Bootstrap: 3, 4, 5

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

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

Вес файла: 8.92 Mb

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

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

Скачать бесплатно

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

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

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

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

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

Авторство: https://github.com/feimosi/baguetteBox.js

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

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

Теги: Plugin, bootstrap 4, Lightbox, галерея, baguettebox, gallery, bootstrap 3, Bootstrap

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

Добавлено: 2017-08-02 в 10:01

Метка: 1583652916

⇄ ⇅

.baguette .thumbnail:hover {
 transform: translateY(-10px) scale(1.02);
}

.baguette .lightbox img {
 border-radius: 4px 4px 0 0;
}

.baguette .caption{
 padding: 26px 30px;
 text-align: center;
}

.baguette .caption h3 {
 font-size: 14px;
 font-weight: bold;
 margin-top: 0;
}

.baguette .caption p {
 font-size: 12px;
 color: #7b7d7d;
 margin: 0;
}
</style>

<h1 class="text-center">BaguetteBox & BootstrapTema</h1>

<div class="col-sm-6 col-md-4">
 <div class="thumbnail">
 <a class="lightbox" href="https://bootstraptema.ru/images/demo/1920x1080/demo4.jpg">
 <img src="https://bootstraptema.ru/images/demo/1920x1080/demo4.jpg" alt="">
 </a>
 <div class="caption">
 <h3>Baguette Images</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div>
 </div>
 </div>

<div class="col-sm-6 col-md-4">
 <div class="thumbnail">
 <a class="lightbox" href="https://bootstraptema.ru/images/demo/1920x1080/demo5.jpg">
 <img src="https://bootstraptema.ru/images/demo/1920x1080/demo5.jpg" alt="">
 </a>
 <div class="caption">
 <h3>Baguette Images</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div>
 </div>
 </div>

<div class="col-sm-6 col-md-4">
 <div class="thumbnail">
 <a class="lightbox" href="https://bootstraptema.ru/images/demo/1920x1080/demo7.jpg">
 <img src="https://bootstraptema.ru/images/demo/1920x1080/demo7.jpg" alt="">
 </a>
 <div class="caption">
 <h3>Baguette Images</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div>
 </div>
 </div>

<div class="col-sm-6 col-md-4">
 <div class="thumbnail">
 <a class="lightbox" href="https://bootstraptema.ru/images/demo/1920x1080/demo8.jpg">
 <img src="https://bootstraptema.ru/images/demo/1920x1080/demo8.jpg" alt="">
 </a>
 <div class="caption">
 <h3>Baguette Images</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div>
 </div>
 </div>

<div class="col-sm-6 col-md-4">
 <div class="thumbnail">
 <a class="lightbox" href="https://bootstraptema.ru/images/demo/1920x1080/demo9.jpg">
 <img src="https://bootstraptema.ru/images/demo/1920x1080/demo9.jpg" alt="">
 </a>
 <div class="caption">
 <h3>Baguette Images</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 </div>
 </div>
 </div>

</div>
</div>

BootstrapTema

BaguetteBox.js

Скриншот

Подробнее

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

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

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