Два блока с zoom эффектом фото / Блоки / Сниппеты Bootstrap

Версия: v1.0.2

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

Для Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Vue, React, Laravel, Angular, WHMCS

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

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

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

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

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

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

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

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

Авторство: bootstraptema.ru

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

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

Теги: Snippet, блок, эффект фото, сниппет, Bootstrap, html, Block, effect foto

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

Добавлено: 2016-02-08 в 15:24

Метка: 1629273729

⇄ ⇅

a.mask {
 text-decoration: none;
 overflow: hidden;
 display: block;
}
img.zoom-img:hover {
 -webkit-transform: scale(1.15);
 -webkit-transition-timing-function: ease-out;
 -webkit-transition-duration: 750ms;
 -moz-transform: scale(1.15);
 -moz-transition-timing-function: ease-out;
 -moz-transition-duration: 750ms;
 overflow: hidden;
}
img.zoom-img {
 -webkit-transform: scale(1, 1);
 -webkit-transition-timing-function: ease-out;
 -webkit-transition-duration: 250ms;
 -moz-transform: scale(1, 1);
 -moz-transition-timing-function: ease-out;
 -moz-transition-duration: 250ms;
}
.btn1 {
 border: none;
 font-family: inherit;
 font-size: inherit;
 font-weight: bold;
 color: inherit;
 background: none;
 cursor: pointer;
 padding: 20px;
 text-align:center;
 display: inline-block;
 margin: 15px 0 0;
 text-transform: uppercase;
 letter-spacing: 1px;
 outline: none;
 position: relative;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
 width: 32%;
}
.btn-8c:hover {
 -webkit-transform: rotateY(15deg);
 -moz-transform: rotateY(15deg);
 -ms-transform: rotateY(15deg);
 transform: rotateY(15deg);
 text-decoration:none;
 background:#2cb149;
 color:#fff;
}
.btn1:after {
 content: '';
 position: absolute;
 z-index: -1;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}
.btn-8 {
 display: block;
 background:#ffde00;
 outline: 1px solid transparent;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
}
</style>

<div class="container"> 
<div class="row">
 
<div class="col-md-6 blog_box">
 <a href="#" class="mask">
<img src="https://bootstraptema.ru/images/demo/1920x1080/demo1.jpg" alt="image" class="img-responsive zoom-img" />
</a>
 <h3><a href="single.html">Первый блок с эффектом фото</a></h3>
 <div class="links">
 <ul>
 <li><i class="fa blog-icon fa-calendar"> </i><span>Июль 13, 2013</span></li>
 <li><i class="fa blog-icon fa-user"> </i><span>aTmpl</span></li>
 <li><i class="fa blog-icon fa-comment"> </i><a href="#"><span>Без комментариев</span></a></li>
 </ul>
 </div>
<p>Наведите курсор на картинку чтобы увидеть эффект приближения, при разном количестве символов блок с меньшим набором будет подстраиваться под блок с большим количеством, имеется в виду горизонтальное выравнивание элемента.</p>
 <a href="#" class="btn1 btn-8 btn-8c">Смотреть</a>
<div class="clearfix"></div>
 </div>

<div class="col-md-6 blog_box">
<a href="#" class="mask">
<img src="https://bootstraptema.ru/images/demo/1920x1080/demo2.jpg" alt="image" class="img-responsive zoom-img"/>
</a>
<h3><a href="#">Второй блок с эффектом фото</a></h3>
<div class="links">
 <ul>
 <li><i class="fa blog-icon fa-calendar"> </i><span>Июль 14, 2013</span></li>
 <li><i class="fa blog-icon fa-user"> </i><span>aTmpl</span></li>
 <li><i class="fa blog-icon fa-comment"> </i><a href="#"><span>Без комментариев</span></a></li>
 </ul>
</div>
 <p>Текстовое описание используемого материала блока с фото, при разном количестве символов блок с меньшим набором будет подстраиваться под блок с большим количеством, имеется в виду горизонтальное выравнивание элемента.</p>
 <a href="#" class="btn1 btn-8 btn-8c">Смотреть</a>
<div class="clearfix"></div>
 </div> 
 
<div class="clearfix"></div>
</div>
</div>

BootstrapTema

Два блока с zoom эффектом фото

Скриншот

Подробнее

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

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

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