Стюле блоки профиле / Блоки / Сниппеты Bootstrap

Версия: v1.0

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

Авторство: https://goo.gl/Er96RF

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

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

Теги: css, адаптивный, Snippet, блок, сниппет, Bootstrap, Responsive, html, Block

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

Добавлено: 2016-11-23 в 23:12

Метка: 1581094477

⇄ ⇅

.our-team .team-image{
 position: relative;
 text-align: center;
}

.our-team img{
 width: 100%;
 height: auto;
}

.our-team .description{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 font-size: 14px;
 color: #fff;
 line-height: 30px;
 padding: 40px 50px;
 opacity: 0;
 background-color: rgba(59, 51, 106, 0.6);
 transition: all 0.5s ease 0s;
}

.our-team:hover .description{
 opacity: 1;
}

.our-team .social{
 padding: 10px 0 0 0;
 margin: 0;
 list-style: none;
 position: absolute;
 top: 40px;
 left: -27px;
 background: #3b336a;
 text-align: center;
 transform: translate(25px, 0px) rotateY(90deg);
 transition: all 0.5s ease 0s;
}

.our-team:hover .social{
 transform: translate(0px, 0px) rotateY(0deg);
}

.our-team .social li{
 display: block;
 margin-bottom: 10px;
}

.our-team .social li a{
 display: block;
 width: 40px;
 height: 35px;
 font-size: 17px;
 color: #fff;
 line-height: 30px;
 transition: all 0.5s ease 0s;
}

.our-team .social li a:hover{
 background: #bc3fbf;
}

.our-team .team-info{
 padding: 20px;
}

.our-team .title{
 font-size: 18px;
 color: #3b336a;
 letter-spacing: 4px;
 margin: 0 0 15px 0;
 transition: all 0.5s ease 0s;
}

.our-team .post{
 display: block;
 font-size: 14px;
 color: #3b336a;
 text-transform: capitalize;
}

.our-team .title:hover,
.our-team .post:hover{
 color: #bc3fbf;
}

@media only screen and (max-width: 990px){
 .our-team{ margin-bottom: 30px; }
}

@media only screen and (max-width: 767px){
 .our-team .social{ left: -20px; }
}

@media only screen and (max-width: 480px){
 .our-team .social{ left: -20px; }
}
</style>

<div class="col-md-4 col-sm-6">
 <div class="our-team">
 <div class="team-image">
 <img src="https://bootstraptema.ru/snippets/block/2016/mmvsoc/mmv.jpg">
 <p class="description">
 Mne poh na vse dvijeniya lic, kotorie schitaut vremya provedyonnoe v etom mire podarcom. Ponos carya ot bezvihodnoi raba nicchem ne otlichaetsya.
 </p>
 <ul class="social">
 <li><a href="#"><i class="fa fa-instagram"></i></a></li>
 <li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
 <li><a href="#"><i class="fa fa-twitter"></i></a></li>
 <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
 </ul>
 </div>
 <div class="team-info">
 <h3 class="title">Mishanya</h3>
 <span class="post">Pacan po jizni</span>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="our-team">
 <div class="team-image">
 <img src="https://bootstraptema.ru/snippets/block/2016/mmvsoc/mmv.jpg">
 <p class="description">
Ochen prosto uznat kto skolko stoit. Skolko zaplatil chtobi bit, stolko i stoish...
 </p>
 <ul class="social">
 <li><a href="#"><i class="fa fa-instagram"></i></a></li>
 <li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
 <li><a href="#"><i class="fa fa-twitter"></i></a></li>
 <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
 </ul>
 </div>
 <div class="team-info">
 <h3 class="title">Mishka</h3>
 <span class="post">Prosto chelovek</span>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="our-team">
 <div class="team-image">
 <img src="https://bootstraptema.ru/snippets/block/2016/mmvsoc/mmv.jpg">
 <p class="description">
Ti pravish mirom, no svoim. Problemi est, ne tolko im odnim, zabrat vsyo vremya i ponyat. Ya bes tebya pustoi mne nechego teryat.
 </p>
 <ul class="social">
 <li><a href="#"><i class="fa fa-instagram"></i></a></li>
 <li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
 <li><a href="#"><i class="fa fa-twitter"></i></a></li>
 <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
 </ul>
 </div>
 <div class="team-info">
 <h3 class="title">Mihail</h3>
 <span class="post">Bud zdesya</span>
 </div>
 </div>
 </div>

</div>
</div>

BootstrapTema

Стюле блоки профиле

Скриншот

Подробнее

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

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

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