Hover Effect Style 37

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

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

<div class="box-bg">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="box">
<div class="pic">
<img src="images/img-1.jpg" alt=""/>
</div>
<div class="content">
<h3 class="title"><a href="#">Web designer</a></h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.?Lorem ipsum dolor sit amet, consectetur adipisicing elit?</p>
</div>
</div>
</div>
</div>
</div>
</div>

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

.box-bg{
overflow: hidden;
}
.box{
position:relative;
}
.box .pic{
position: relative;
z-index: 1;
transform-origin: 95% 50% 0;
transition: all 0.5s ease 0s;
}
.box .pic:after{
content: "";
position: absolute;
top: 50%;
left:95%;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
margin: -4px 0 0 -4px;
}
.box:hover .pic{
transform:rotate(-140deg);
}
.box .pic img{
width:100%;
height:auto;
border-radius:50%;
}
.box .content{
position: absolute;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 70px 20px;
background: #b9607e;
}
.box .title{
text-align:center;
margin-bottom:5%;
text-transform:uppercase;
}
.box .title a{
color:#fff;
transition: all 0.3s ease 0s;
}
.box .title a:hover{
color:#333;
}
.box .description{
color:#fff;
text-align:center;
text-transform:uppercase;
}
@media only screen and (max-width: 990px) {
.box{
margin-bottom:20px;
}
}

Теги: