Scrolling screenshot in your device / Эффекты / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

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

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

Bootstrap: 3, 4, 5

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

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

Вес файла: 226.4 Kb

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

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

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

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

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

Подбери: Домен для сайта

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

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

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

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

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

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

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

Теги: Scroll, Эффект, snippet, scrolling, effect, Сниппет, Bootstrap, HTML

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

Добавлено: 2016-04-26 в 14:54

Метка: 1581149178

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />

<style>
.device-bg{
 background: url('https://bootstraptema.ru/snippets/effect/2016/essd/device-bg.png') no-repeat center top; 
 width: 350px;
 height:215px;
 display:inline-block;
 position: relative;
}
.device-bg .screen-bg{
 background-position: center 0;
 background-repeat: no-repeat;
 position: absolute;
 width: 280px;
 height: 165px;
 top: 23px;
 left: 0;
 background-size: cover;
 right: 0;
 margin: 0 auto;
}
.device-bg .screen-bg{
 transition: all 6s ease-out 0s;
 -webkit-transition: all 6s ease-out 0s;
 -moz-transition: all 6s ease-out 0s;
 -ms-transition: all 6s ease-out 0s;
 -o-transition: all 6s ease-out 0s;
}
.device-bg:hover .screen-bg{
 background-position: center 100%!important;
}
</style>

<div class="container">
<div class="row">
 
 <div class="col-sm-4 text-center">
 <a href="#">
 <span class="device-bg">
 <span class="screen-bg" style="background-image: url('https://bootstraptema.ru/snippets/effect/2016/essd/templates-bootstraptema.jpg');"></span>
 </span>
 </a>
 </div>
 <div class="col-sm-4 text-center">
 <a href="#">
 <span class="device-bg">
 <span class="screen-bg" style="background-image: url('https://bootstraptema.ru/snippets/effect/2016/essd/plugins-bootstraptema.jpg');"></span>
 </span>
 </a>
 </div>
 <div class="col-sm-4 text-center">
 <a href="#">
 <span class="device-bg">
 <span class="screen-bg" style="background-image: url('https://bootstraptema.ru/snippets/effect/2016/essd/snippets-bootstraptema.jpg');"></span>
 </span>
 </a>
 </div>

</div>
</div>