Hover Effect Style 37

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

Web designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit.?Lorem ipsum dolor sit amet, consectetur adipisicing elit?

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;
}
}



Теги:
0

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

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