Sites-Camelia/branches/divan-dit-vent/scss/_service.scss

86 lines
2.4 KiB
SCSS
Raw Normal View History

2021-06-19 20:20:40 +00:00
.service_bg_1{
background-image: url(../img/about/1.png);
}.service_bg_2{
background-image: url(../img/about/2.png);
}.service_bg_3{
background-image: url(../img/about/3.png);
}
.service_area{
padding-top: 150px;
padding-bottom: 120px;
@media #{$mobile_device} {
padding-top: 50px;
padding-bottom: 50px;
}
@media #{$tablet_device} {
padding-top: 100px;
padding-bottom: 100px;
}
.single_service{
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 30px;
background-position: center;
overflow: hidden;
.service_hover{
text-align: center;
padding: 104px 0 94px 0;
background: rgba(0, 0, 0, .30 ) ;
@include transition(.5s);
position: relative;
img{
}
h3{
font-size: 20px;
color: #fff;
margin-top: 20px;
margin-bottom: 0;
}
.hover_content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: table;
width: 100%;
height: 100%;
background: #28AE60;
@include transform(translateY(40%));
@include transition(.5s);
opacity: 0;
visibility: hidden;
.hover_content_inner{
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 0 54px;
@media #{$tablet_device} {
padding: 0 10px;
}
h4{
font-size: 20px;
color: #fff;
margin-bottom: 8px;
}
p{
font-size: 16px;
color: #fff;
}
}
}
}
&:hover{
background-position: top;
.hover_content{
@include transform(translateY(0%));
opacity: 1;
visibility: visible;
}
.service_hover{
background: rgba(0, 0, 0, .50 );
}
}
}
}