Подробное описание и демонстрацией работы эффекта наведения под номером №61 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
Демонстрация эффекта наведения — стиль 61
Web Developer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget egestas turpis. Cras vitae tellus.
read more
Graphic Designer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget egestas turpis. Cras vitae tellus.
read more
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-61/img-1.jpg" alt=""/>
<div class="box-content">
<h3 class="title">Web Designer</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget egestas turpis. Cras vitae tellus.
</p>
<a href="#" class="read">read more</a>
</div>
</div>
</div>
</div>
</div>
css разметка для реализации данного эффекта
.box{
position: relative;
}
.box img{
width: 100%;
height: auto;
}
.box .box-content{
width: 90%;
height: 90%;
position: absolute;
top: 5%;
left: 5%;
padding: 10px 10px 10px 35px;
border: 1px solid #555;
background: rgba(0, 0, 0, 0.40);
color: #fff;
overflow: hidden;
z-index: 1;
}
.box .box-content:before{
content: "";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
position: absolute;
top: 0;
left: -20px;
transform: rotate(-90deg);
transform-origin: 0 100% 0;
transition: all 0.2s ease 0s;
z-index: -1;
}
.box:hover .box-content:before{
transform: rotate(0deg);
left: 0px;
}
.box .title{
font-size: 24px;
margin-bottom: 0;
}
.box .description{
font-size: 14px;
margin-top: 5px;
}
.box .read{
display: inline-block;
font-size: 16px;
color: #fff;
text-transform: capitalize;
transition: all 0.3s ease 0s;
}
.box .read:hover{
color: #36bcc8;
text-decoration: none;
}
@media only screen and (max-width: 990px) {
.box{ margin-bottom:15px; }
}
@media only screen and (max-width: 359px) {
.box .title{
font-size: 20px;
margin-top:0;
}
.box .description{ margin-bottom: 5px; }
}
Теги: