Hover Effect Style 53

Подробное описание и демонстрацией работы эффекта наведения под номером №52 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.

Демонстрация эффекта наведения — стиль 52

Заголовок

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae!

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae!

Graphic Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae!

html разметка для реализации данного эффекта

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="box">
<img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-52/img-1.jpg" alt=""/>
<div class="box-content">
<h2>Web Designer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae!</p>
</div>
</div>
</div>
</div>
</div>

css разметка для реализации данного эффекта

.box{
background: #3085a3;
overflow: hidden;
position: relative;
}
.box img{
width: 100%;
height: auto;
opacity: 0.7;
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
}
.box:hover img {
opacity: 0.6;
}
.box .box-content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 18px;
color: #fff;
padding: 42px;
text-transform: uppercase;
}
.box .box-content:before {
content: "";
width: 300px;
height: 300px;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
bottom: -100px;
right: -100px;
box-shadow: 0 0 0 900px rgba(255, 255, 255, 0.2);
opacity: 0;
transform: scale3d(0.5, 0.5, 1);
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
}
.box:hover .box-content:before {
opacity: 1;
transform: scale3d(1, 1, 1);
}
.box .box-content h2 {
font-size: 25px;
transform: translate3d(5px, 5px, 0px);
transition: transform 0.35s ease 0s;
}
.box .box-content p {
width: 140px;
font-size: 12px;
letter-spacing: 1px;
position: absolute;
bottom: 0;
right: 0;
padding: 0 1.5em 1.5em 0;
text-align: right;
opacity: 0;
transform: translate3d(20px, 20px, 0px);
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
}
.box:hover h2,
.box:hover p {
opacity: 1;
transform: translate3d(0px, 0px, 0px);
}
@media only screen and (max-width: 990px) {
.box{  margin-bottom:20px; }
}
@media only screen and (max-width: 360px) {
.box .box-content{ padding: 15px; }
.box .box-content:before{
width: 270px;
height: 270px;
}
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *