Hover Effect Style 77

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

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

заговолокer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat, lacus ut varius.

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat, lacus ut varius.

Graphic Designer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat, lacus ut varius.

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

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="box">
<div class="box-image">
<img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-76/img-1.jpg">
</div>
<div class="box-content">
<h3 class="title">web designer</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat, lacus ut varius.
</p>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="box">
<div class="box-image">
<img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-76/img-2.jpg">
</div>
<div class="box-content">
<h3 class="title">Web Developer</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat, lacus ut varius.
</p>
</div>
</div>
</div>
</div>
</div>

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

.box{
box-shadow: 0 0 5px #c2bdbd;
overflow: hidden;
text-align: center;
position: relative;
}
.box .box-image{
position: relative;
}
.box .box-image img{
width: 100%;
height: auto;
}
.box .box-image:before,
.box .box-image:after{
content: "";
width: 170%;
height: 190%;
background: rgba(255, 121, 74, 0.5);
position: absolute;
transition: all 0.3s ease-in-out 0.6s;
}
.box .box-image:before{
top: 0;
left: -67px;
transform: rotate(56.5deg) translateX(-70%);
transform-origin: 70% 0 0;
}
.box:hover .box-image:before{
transform: rotate(56.5deg) translateX(-30%);
}
.box .box-image:after{
bottom: 0;
right: -46px;
transform: rotate(56.5deg) translateX(111%);
transform-origin: 50% 51% 0;
}
.box:hover .box-image:after{
transform: rotate(56.5deg) translateX(71%);
}
.box .box-content{
width: 100%;
height: 0;
background: rgba(0, 0, 0, 0.9);
position: absolute;
top: 0;
left: 0;
overflow: hidden;
transform: rotate(-33.5deg) translate(-74px, 200px);
transform-origin: 0 100% 0;
transition: all 0.4s ease-in-out 0s;
}
.box:hover .box-content{
height: 70%;
top: 15%;
transform: rotate(0deg) translate(0px, 0px);
transition: all 0.4s ease-in-out 0.9s;
}
.box .title{
font-size: 20px;
font-weight: 700;
color: #fff;
padding: 10px;
margin: 20px 0 0;
text-transform: capitalize;
}
.box .description{
font-size: 12px;
font-style: italic;
color: #fff;
padding: 10px 20px 10px;
}
@media only screen and (max-width: 990px){
.box{ margin-bottom: 30px; }
}
@media only screen and (min-width: 600px) and (max-width: 767px){
.box .box-content{
transform: rotate(-33.5deg) translate(-144px, 390px);
}
}
@media only screen and (min-width: 481px) and (max-width: 599px){
.box .box-content{
transform: rotate(-33.5deg) translate(-155px, 330px);
}
}
@media only screen and (max-width: 480px){
.box .box-content{
transform: rotate(-33.5deg) translate(-95px, 250px);
}
}
@media only screen and (max-width: 479px){
.box .box-image:before{ left: -57px }
.box .title{
margin: 10px 0 0 0;
padding: 0 10px;
}
}
@media only screen and (max-width: 359px){
.box .box-image:before{ left: -40px }
}



Теги:
0

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

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