Your IP : 216.73.216.240
//Affect Style
$image-theme-path : "../images/";
/**
* Hover image
*/
.wpb_single_image{
overflow: hidden;
display: block;
a{
display: block !important;
}
.vc_single_image-wrapper{
display: block !important;
}
&:hover{
cursor: pointer;
}
}
.hover-image{
position: absolute;
top:0;
left:-100%;
@include transition(0.4s);
height: auto;
}
.img-effect{
&:hover{
.wp-post-image{
@include rtl-margin-left(100%);
@include transition(0.4s);
}
.hover-image{
right:0;
left:0%;
margin: auto;
@include transition(0.4s);
}
}
}
//border
div.affect-border{
&:hover{
&:before{
top: 1px;
left: 0;
}
&:after{
top: -1px;
right: 0;
}
div.affect-border-inner{
&:before{
top: 0;
left: 0;
}
&:after{
bottom: 0;
left: 0;
}
}
}
}
div.affect-border,
div.affect-border-inner{
position: relative;
overflow: hidden;
cursor: pointer;
position: relative;
display: block;
&:before,&:after{
@include transition(all 0.4s);
content: " ";
display: block;
position: absolute;
z-index: 99;
background: $theme-color;
}
}
div.affect-border{
&:before,&:after{
height: 100%;
width: 2px;
}
&:before{
top: -100%;
left: 0;
}
&:after{
top: 100%;
right: 0;
}
}
div.affect-border-inner{
&:before,&:after{
height: 2px;
width: 100%;
}
&:before{
top: 0;
left: 100%;
}
&:after{
bottom: 0;
left: -100%;
}
}
//affect-zoo-border
.affect-zoo-border{
position: relative;
}
.affect-zoo-border-inner{
@include translate3d(-20px, 0px, 0px);
@include transition-transform(0.4s);
img{
@include scale(1.1);
}
&:hover{
@include translate3d(0px, 0px, 0px);
}
}
.affect-zoo-border{
&:before{
content:'';
display: block;
position: absolute;
z-index:10;
pointer-events:none;
border: 1px solid transparent;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
@include transition(0.4s);
}
&:hover:before{
@include transition(0.4s);
border: 1px solid #fff;
}
}
//affect-border-2
.slide-border .overlay_border{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:1;
pointer-events:none;
}
.slide-border .overlay_border:before,
.slide-border .overlay_border:after{
content: '';
display: block;
position: absolute;
z-index:10;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
-webkit-transition: -webkit-transform 0.4s ease 0s;
transition: transform 0.4s ease 0s;
}
.slide-border .overlay_border:before{
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
}
.slide-border .overlay_border:after{
border-left: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1, 0);
}
.slide-border:hover .overlay_border:before,
.slide-border:hover .overlay_border:after,
.slide-border.hover .overlay_border:before,
.slide-border.hover .overlay_border:after{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.slide-border .overlay_border:before,
.slide-border .overlay_border:before,
.slide-border .overlay_border:after,
.slide-border .overlay_border:after {
top: 30px;
right: 15px;
bottom: 30px;
left: 14px;
}
//plus
.affect-plus{
position: relative;
&::before{
overflow: hidden;
position: absolute;
top: 0;
content: "";
z-index: 100;
@include square(percentage(1));
@include rtl-left(0);
opacity:0;
@include transition(all 0.4s ease 0s);
@include transform(scale(0.4) rotateY(180deg));
background: url('#{$image-theme-path}plus.png') no-repeat scroll center center / 60px 60px rgba(#000,.6);
pointer-events:none;
}
&:hover{
&::before{
visibility: visible;
opacity:0.6;
@include transform(scale(1) rotateY(0deg));
}
}
}
//zoom
.affect-zoom{
position: relative;
@include transition(0.4s);
&:after{
position: absolute;
left: 0;
width: 100%;
height: 100%;
top:0;
content: "";
pointer-events:none;
}
img{
@include scale(1);
@include transition(0.4s);
}
&:hover{
img {
@include scale(1.05);
@include transition(0.4s);
}
}
}
.affect-zoom-animation{
position: relative;
@include transition(0.4s);
&:after{
position: absolute;
left: 0;
width: 100%;
height: 100%;
top:0;
content: "";
}
&:hover{
&:after{
@include transition(0.4s);
background: rgba(0, 0, 0, 0.3);
}
img {
animation: 10s linear 0s alternate none 2 running animation_zoom;
}
}
}
@keyframes animation_zoom {
0% {
transform: scale(1) translateX(0px);
}
50% {
transform: scale(1.2) translateX(-10px);
}
75% {
transform: scale(1.3) translateX(-20px);
}
100% {
transform: scale(1.4) translateX(-30px);
}
}
//flast
.affect-fast{
position: relative;
&:after{
position: absolute;
left: -100%;
width: 100%;
height: 100%;
top:0;
content: "";
background: url('#{$image-theme-path}mlass.png') no-repeat;
@include transition(1.5s);
pointer-events:none;
}
&:before {
border: 6px solid rgba(255, 255, 255, 0.5);
bottom: 0;
box-sizing: border-box;
content: "";
left: 0;
overflow: visible;
position: absolute;
right: 0;
top: 0;
pointer-events:none;
}
&:hover{
&:after{
@include transition(1.5s);
left: 100%;
}
}
}
//button
.add-links,.quick-view{
display: inline-block;
}
.caption-product{
.ground-addcart{
position: absolute;
bottom:15px;
z-index: 99;
left:0;
opacity: 0;
text-align: left;
}
}
.product-block{
overflow: hidden;
&:hover{
@include transition(0.4s);
.ground-addcart{
left:15px;
opacity: 1;
@include transition(0.4s);
}
.quick-view{
opacity: 1;
visibility: visible;
@include transition(0.4s);
}
}
//Hover image product
.wp-post-image{
@include rtl-margin-left(0);
@include transition(0.4s);
}
.hover-image{
display: none;
position: absolute;
}
}
.list-view {
.product-block{
&:hover{
.caption-product{
background: transparent;
}
.name a{
color: $color-title;
}
}
}
}