.ova-gallery-slide{
.gallery-slide{
.owl-stage-outer{
.gallery-box {
.gallery-fancybox{
&:hover{
&:before{
@include transaction( all, 0.5s, ease );
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.list-gallery{
.icon-box{
@include transaction( all, 0.3s, ease );
top: 50%;
opacity: 1;
}
}
}
&:before{
@include transaction( all, 0.5s, ease );
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: #000;
opacity: 0.5;
z-index: 1;
}
.list-gallery{
position: relative;
img{
object-fit:cover;
margin: 0 auto;
}
.icon-box{
@include transaction( all, 0.3s, ease );
position: absolute;
top: 55%;
left: 50%;
transform:translate(-50%,-50%);
z-index: 2;
opacity: 0;
i{
font-size: 40px;
color: var(--heading);
display: inline-flex;
}
}
}
}
}
}
.owl-nav{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
z-index: 1;
width: 90px;
height: 90px;
border-radius: 50%;
gap:10px;
background-color: var(--secondary);
&:hover{
background-color: var(--heading);
}
button{
display: inline-flex;
i{
display: inline-flex;
font-size: 16px;
color: #000;
}
&:hover{
i{
color: var(--primary);
}
}
}
}
.owl-dots{
margin-top: 30px;
text-align: center;
button{
width: 8px;
height: 8px;
background-color: var(--heading);
border-radius: 50%;
margin: 0px 4px;
&.active{
background-color: var(--primary);
}
}
}
.owl-stage{
display: flex;
align-items:center;
}
}
&.template2{
.owl-stage-outer{
.gallery-box {
.gallery-fancybox{
&:hover{
.list-gallery{
.icon-box{
@include transaction( all, 0.3s, ease );
opacity: 1;
}
}
}
&:before{
opacity: 0;
}
.list-gallery{
.icon-box{
i{
font-size: 50px;
}
}
}
}
}
}
.owl-dots{
display: none;
}
.owl-nav{
display: none;
}
}
}