Эффект перекатывания фото / Эффекты / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Для Bootstrap: 3

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

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

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

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

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

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

Прикреплён файл №1: /_sf/20/2035.css

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

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

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

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

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

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

Теги: css, эффект, Snippet, Effect, сниппет, Bootstrap, html, ihover

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

Добавлено: 2017-05-06 в 22:45

Метка: 1566191924

⇄ ⇅

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Effect Snippets | BootstrapTema</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/snippets/effect/2017/ihover9/ihover.css" />
<style>
/*body background */
body{background:#37B7E5}

/*demo effect */
.welcome-grids{
padding:80px 0;
background:#37B7E5;
}
.welcome-grid img{
width:100%;
}
.welcome-grid{
padding:0;
}
.info h4 {
margin-bottom:20px;
font-size: 24px;
color: #37B7E5;
padding-top: 70px;
}
.info p {
line-height:1.8em;
font-size:14px;
color:#464646;
}
@media (max-width: 1080px){
.welcome-grids{
 padding: 65px 0;
}
}
 @media (max-width: 991px){
 .welcome-grid{
 float: left;
 width: 25%;
 padding: 0 6px;
 }
 .info h4 {
 margin-bottom: 8px;
 font-size: 20px;
 padding-top: 53px;
 }
 }
 @media (max-width: 640px){
 .welcome-grid {
 float: left;
 width: 33.3%;
 padding: 0 7px;
 }
 .welcome-grid:nth-child(5) {
 margin-top: 30px;
 }
 .welcome-grid:nth-child(5) {
 margin-top: 30px;
 width: 100%;
 }
 .welcome-grid:nth-child(5) .ih-item.circle {
 width: 33.3% !important;
 }
 }
 @media (max-width: 480px){
 .welcome-grid {
 float: left;
 width: 50%;
 }
 .welcome-grid:nth-child(5) {
 width: 50%;
 }
 .welcome-grid:nth-child(5) .ih-item.circle {
 width: 100% !important;
 }
 .welcome-grid:nth-child(5),.welcome-grid:nth-child(4) {
 margin-top: 30px;
 }
 }
 @media (max-width: 320px){
 .info h4 {
 padding-top: 29px;
 }
 }
</style>
</head>
<body>
<div class="welcome-grids">
<div class="container">

<div class="col-md-3 welcome-grid text-center">
 <div class="ih-item circle effect9 left_to_right"><a href="#">
 <div class="img"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/1.png" alt="" /></div>
 <div class="info">
 <h4>HULI</h4>
 <p>Prodyuser</p>
 </div></a>
 </div>
 </div>
 
 <div class="col-md-3 welcome-grid text-center">
 <div class="ih-item circle effect9 left_to_right"><a href="#">
 <div class="img"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/2.png" alt="" /></div>
 <div class="info">
 <h4>NULE</h4>
 <p>Dizainer</p>
 </div></a>
 </div>
 </div>
 
 <div class="col-md-3 welcome-grid text-center">
 <div class="ih-item circle effect9 left_to_right"><a href="#">
 <div class="img"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/3.png" alt="" /></div>
 <div class="info">
 <h4>PULE</h4>
 <p>Organizator</p>
 </div></a>
 </div>
 </div>
 
 <div class="col-md-3 welcome-grid text-center">
 <div class="ih-item circle effect9 left_to_right"><a href="#">
 <div class="img"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/4.png" alt="" /></div>
 <div class="info">
 <h4>SRULE</h4>
 <p>Cloacker</p>
 </div></a>
 </div>
 </div>
 
 <div class="clearfix"></div>

</div>
</div>
</body>
</html>

BootstrapTema

Эффект перекатывания фото

Скриншот

Подробнее

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

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

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