.wl_hover_box{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
min-height: 100%;
display: inline-grid;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wl_hover_box .hover-content{
position: absolute;
display: block;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-position: center;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.hover-content .hover-box-inner{
position: absolute;
display: block;
width: 100%;
height: auto;
left: 0;
top: 0;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.hover-content.position-middle .hover-box-inner {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.hover-content.position-bottom .hover-box-inner {
bottom: 0;
top: unset;
}
.hover-content.foreground{
z-index: 1;
opacity: 0;
visibility: hidden;
background: rgba(0,0,0,0.6);
}
.wl_hover_box:hover .hover-content.foreground{
opacity: 1;
visibility: visible;
}
.effect-zoom-in.hover-content{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.wl_hover_box:hover .hover-content.effect-zoom-in{
-webkit-transform: scale(1);
transform: scale(1);
}
.effect-zoom-out.hover-content{
-webkit-transform: scale(1);
transform: scale(1);
}
.wl_hover_box:hover .hover-content.effect-zoom-out{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.wl_hover_box:hover .hover-content.effect-fade-out{
opacity: 0;
}
.wl_hover_box:hover .hover-content.effect-fade-in{
opacity: 1;
}
.wl_hover_box:hover .hover-content.effect-to-right{
}
.wl_hover_box .hover-content.effect-from-left .hover-box-inner{
margin-left: -100%;
}
.wl_hover_box:hover .hover-content.effect-from-left .hover-box-inner{
margin-left: 0;
}
.wl_hover_box .hover-content.effect-from-right .hover-box-inner{
margin-left: 100%;
}
.wl_hover_box:hover .hover-content.effect-from-right .hover-box-inner{
margin-left: 0;
}
.wl_hover_box .hover-content.effect-to-left{
margin-left: 0;
}
.wl_hover_box:hover .hover-content.effect-to-left{
margin-left: -100%;
}
.wl_hover_box .hover-content.effect-to-right{
margin-left: 0;
}
.wl_hover_box:hover .hover-content.effect-to-right{
margin-left: 100%;
}
.wl_hover_box .hover-content.effect-up{
margin-top: 0;
}
.wl_hover_box:hover .hover-content.effect-up{
margin-top: -100%;
}
.wl_hover_box .hover-content.effect-down{
margin-top: 0;
}
.wl_hover_box:hover .hover-content.effect-down{
margin-top: 100%;
}
.wl_hover_box .hover-content.effect-from-top .hover-box-inner{
margin-top: -100%;
}
.wl_hover_box:hover .hover-content.effect-from-top .hover-box-inner{
margin-top: 0;
}
.wl_hover_box .hover-content.effect-from-bottom .hover-box-inner{
margin-top: 100%;
}
.wl_hover_box:hover .hover-content.effect-from-bottom .hover-box-inner{
margin-top: 0;
}
.wl_hover_box .hover-content.effect-from-bottom.position-bottom .hover-box-inner{
margin-bottom: -100%;
}
.wl_hover_box:hover .hover-content.effect-from-bottom.position-bottom .hover-box-inner{
margin-bottom: 0;
}
.wl_hover_box .hover-content.effect-from-top.position-bottom .hover-box-inner{
margin-bottom: 100%;
}
.wl_hover_box:hover .hover-content.effect-from-top.position-bottom .hover-box-inner{
margin-bottom: 0;
}
.wl_hover_box .hover-content.effect-scale-up .hover-box-inner{
-webkit-transform: scale(0);
transform: scale(0);
}
.wl_hover_box:hover .hover-content.effect-scale-up .hover-box-inner{
-webkit-transform: scale(1);
transform: scale(1);
}
.wl_hover_box .hover-content.effect-scale-up.position-middle .hover-box-inner{
-webkit-transform: scale(0) translateY(-50%);
transform: scale(0) translateY(-50%);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.wl_hover_box:hover .hover-content.effect-scale-up.position-middle .hover-box-inner{
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%);
}
.wl_hover_box .hover-content.effect-scale-down .hover-box-inner{
-webkit-transform: scale(10);
transform: scale(10);
}
.wl_hover_box:hover .hover-content.effect-scale-down .hover-box-inner{
-webkit-transform: scale(1);
transform: scale(1);
}
.wl_hover_box .hover-content.effect-scale-down.position-middle .hover-box-inner{
-webkit-transform: scale(10) translateY(-50%);
transform: scale(10) translateY(-50%);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.wl_hover_box:hover .hover-content.effect-scale-down.position-middle .hover-box-inner{
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%);
}