Red Hover CSS Effect / Эффекты / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2017-05-16 в 15:35

Метка: 1566191485

⇄ ⇅

/* demo snippet */
.hoversnippet {
 background-color: #fff;
 color: #ffffff;
 display: inline-block;
 font-size: 16px;
 overflow: hidden;
 position: relative;
 text-align: left;
 width: 100%;
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
}
.hoversnippet *,
.hoversnippet *:before,
.hoversnippet *:after {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.45s ease;
 transition: all 0.45s ease;
}
.hoversnippet img {
 backface-visibility: hidden;
 vertical-align: top;
}
.hoversnippet:before,
.hoversnippet:after {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 content: '';
 background-color: #b81212;
 opacity: 0.5;
 -webkit-transition: all 0.45s ease;
 transition: all 0.45s ease;
}
.hoversnippet:before {
 -webkit-transform: skew(30deg) translateX(-80%);
 transform: skew(30deg) translateX(-80%);
}
.hoversnippet:after {
 -webkit-transform: skew(-30deg) translateX(-70%);
 transform: skew(-30deg) translateX(-70%);
}
.hoversnippet figcaption {
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 z-index: 1;
 bottom: 0;
 padding: 25px 40% 25px 20px;
}
.hoversnippet figcaption:before,
.hoversnippet figcaption:after {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: #b81212;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
 content: '';
 opacity: 0.5;
 z-index: -1;
}
.hoversnippet figcaption:before {
 -webkit-transform: skew(30deg) translateX(-100%);
 transform: skew(30deg) translateX(-100%);
}
.hoversnippet figcaption:after {
 -webkit-transform: skew(-30deg) translateX(-90%);
 transform: skew(-30deg) translateX(-90%);
}
.hoversnippet h3,
.hoversnippet p {
 margin: 0;
 opacity: 0;
 letter-spacing: 1px;
}
.hoversnippet h3 {
 font-size: 20px;
 font-weight: 700;
 line-height: 1em;
 text-transform: uppercase;
 width: auto;
}
.hoversnippet p {
 font-size: 0.9em;
}
.hoversnippet a {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 1;
}
.hoversnippet:hover h3,
.hoversnippet.hover h3,
.hoversnippet:hover p,
.hoversnippet.hover p {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 0.9;
 -webkit-transition-delay: 0.2s;
 transition-delay: 0.2s;
}
.hoversnippet:hover:before,
.hoversnippet.hover:before {
 -webkit-transform: skew(30deg) translateX(-20%);
 transform: skew(30deg) translateX(-20%);
 -webkit-transition-delay: 0.05s;
 transition-delay: 0.05s;
}
.hoversnippet:hover:after,
.hoversnippet.hover:after {
 -webkit-transform: skew(-30deg) translateX(-10%);
 transform: skew(-30deg) translateX(-10%);
}
.hoversnippet:hover figcaption:before,
.hoversnippet.hover figcaption:before {
 -webkit-transform: skew(30deg) translateX(-40%);
 transform: skew(30deg) translateX(-40%);
 -webkit-transition-delay: 0.15s;
 transition-delay: 0.15s;
}
.hoversnippet:hover figcaption:after,
.hoversnippet.hover figcaption:after {
 -webkit-transform: skew(-30deg) translateX(-30%);
 transform: skew(-30deg) translateX(-30%);
 -webkit-transition-delay: 0.1s;
 transition-delay: 0.1s;
}
</style>

<figure class="hoversnippet"><img src="https://bootstraptema.ru/snippets/effect/2017/redhover/red-hover-effect.jpg" class="img-responsive" alt="Red Hover Effect" />
 <figcaption>
 <h3>DESIGNER BOOTSTRAP</h3>
 <p>Huli designer ili ne huli</p>
 </figcaption>
 <a href="#"></a>
</figure>

</div></div></div>

BootstrapTema

Red Hover CSS Effect

Скриншот

Подробнее

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

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

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