Разворачивание изображений при наведении / Эффекты / Сниппеты Bootstrap

Версия: v1.0.1

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

Категория: Эффекты

Для Bootstrap: 3, 4

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

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

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

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

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

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

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

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

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

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

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

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

Теги: ModaL, эффект, Snippet, Effect, Hover, Bootstrap

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

Добавлено: 2017-05-23 в 21:54

Метка: 1566191277

⇄ ⇅

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Hover Scroll Effect and Preview Show Fullscreen | BootstrapTema</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
.images--block {
 cursor: pointer;
 position: relative;
 max-height: 200px;
 overflow: hidden;
 -moz-transition: max-height .5s;
 -webkit-transition: max-height .5s;
 -o-transition: max-height .5s;
 -ms-transition: max-height .5s;
 transition: max-height .5s;
}
.images--block:hover {
 max-height: 1000px;
 height: 100%;
}
.images--full {
 background: rgba(0, 0, 0, 0.13);
 position: absolute;
 cursor: pointer;
 padding: 5px;
 color: #fff;
 right: 0;
 top: 0;
}
.images--modal {
 display: none;
 position: fixed;
 z-index: 99999;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 padding-top: 25px;
 padding-bottom: 25px;
 background-color: rgb(0,0,0);
 background-color: rgba(0,0,0,0.9);
}
.images--content {
 margin: auto;
 display: block;
}
.images--content {
 max-height:100%;
 max-width:100%;
 -webkit-animation-name: images--zoom;
 -webkit-animation-duration: 0.6s;
 animation-name: images--zoom;
 animation-duration: 0.6s;
}
@-webkit-keyframes images--zoom {
 from {-webkit-transform: scale(0)}
 to {-webkit-transform: scale(1)}
}
@keyframes images--zoom {
 from {transform: scale(0.1)}
 to {transform: scale(1)}
}
.images--close--modal {
 position: absolute;
 top: 13px;
 right: 13px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;
}
.images--close--modal:hover,
.images--close--modal:focus {
 color: #ffffff;
 text-decoration: none;
 cursor: pointer;
 transform: rotate( -180deg ); 
 transition: transform 150ms ease;
}
@media only screen and (max-width: 700px){
 .images--content {
 width: 100%;
 }
}
</style>
</head>
<body>

<h2 class="text-center">Image Hover Scroll Effect and Preview Show Fullscreen</h2>
 <div id="images--container" class="col-md-8 col-md-offset-2">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
 <img src="https://bootstraptema.ru/images/demo/1920x1080/demo1.jpg" class="img-responsive">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
 <img src="https://bootstraptema.ru/images/demo/1920x1080/demo2.jpg" class="img-responsive">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
 <img src="https://bootstraptema.ru/images/demo/1920x1080/demo3.jpg" class="img-responsive">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
 <img src="https://bootstraptema.ru/images/demo/1920x1080/demo4.jpg" class="img-responsive">
</div>

</div></div>

</body>
</html>

BootstrapTema

Разворачивание изображений при наведении

Скриншот

Подробнее

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

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

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