Your IP : 216.73.216.95
/* Hover effect Type */
.custom-banners {
padding: 20px 0px 25px 0px;
}
.hover_effect_type {
position: relative;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
cursor: pointer;
}
.banner_name {
font-size: 14px;
font-weight: 600;
margin-bottom: 5px;
color: #000;
}
.banner_name > span{
display: inline-block;
vertical-align: top;
}
.banner_name ul{
display: inline-block;
list-style: none;
padding-left: 10px;
}
.banner_name ul li{
font-size: 10px;
text-transform: uppercase;
}
.banner_name ul li:before{
content: "-";
margin-right: 3px;
}
.hover_effect_type label{
margin: 0;
display: block;
cursor: pointer;
}
/* @group Banners hover effect */
.banners-effect-1 .row-no-padding a > img,
.banners-effect-1 .banners > div img {
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
}
.banners-effect-1 .row-no-padding a > img:hover,
.banners-effect-1 .banners > div img:hover {
opacity: 0.8;
}
.banners-effect-2 .row-no-padding a,
.banners-effect-2 .banners > div a {
display: block;
position: relative;
overflow: hidden;
}
.banners-effect-2 .row-no-padding a:before,
.banners-effect-2 .banners > div a:before {
background-color: rgba(255, 255, 255, 0.2);
display: block;
width: 100%;
height: 100%;
left: -100%;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
content: "";
z-index: 1;
}
.banners-effect-2 .row-no-padding a:hover:before,
.banners-effect-2 .banners > div a:hover:before {
left: 0;
opacity: 1;
}
.banners-effect-3 .row-no-padding a,
.banners-effect-3 .banners > div a {
display: block;
position: relative;
overflow: hidden;
}
.banners-effect-3 .row-no-padding a:before,
.banners-effect-3 .banners > div a:before {
border: 50px solid transparent;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
top: 0;
content: "";
opacity: 1;
filter: alpha(opacity=100);
width: 100px;
height: 100px;
-webkit-transform: scale(7);
-ms-transform: scale(7);
-o-transform: scale(7);
transform: scale(7);
-webkit-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
visibility: visible;
z-index: 1;
}
.banners-effect-3 .row-no-padding a:hover:before,
.banners-effect-3 .banners > div a:hover:before {
border: 0 solid rgba(0, 0, 0, 0.7);
opacity: 0;
filter: alpha(opacity=0);
}
.banners-effect-4 .row-no-padding a,
.banners-effect-4 .banners > div a {
display: block;
position: relative;
overflow: hidden;
}
.banners-effect-4 .row-no-padding a:before,
.banners-effect-4 .banners > div a:before {
border-bottom: 50px solid rgba(255, 255, 255, 0.4);
border-top: 50px solid rgba(255, 255, 255, 0.4);
content: "";
height: 100%;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1);
-o-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1);
-webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1);
-moz-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1);
-ms-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1);
-webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
-o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
transform-origin: 50% 50% 0;
width: 100%;
}
.banners-effect-4 .row-no-padding a:hover:before,
.banners-effect-4 .banners > div a:hover:before {
opacity: 1;
filter: alpha(opacity=100);
transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 4, 1);
-o-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 4, 1);
-webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 4, 1);
-moz-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 4, 1);
-ms-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 4, 1);
}
.banners-effect-5 .row-no-padding a,
.banners-effect-5 .banners > div a {
display: block;
position: relative;
overflow: hidden;
}
.banners-effect-5 .row-no-padding a:before,
.banners-effect-5 .banners > div a:before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: all 0.4s cubic-bezier(0.94, 0.85, 0.1, 0.62) 0s;
-o-transition: all 0.4s cubic-bezier(0.94, 0.85, 0.1, 0.62) 0s;
transition: all 0.4s cubic-bezier(0.94, 0.85, 0.1, 0.62) 0s;
z-index: 1;
border: 200px double transparent;
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
}
.banners-effect-5 .row-no-padding a:hover:before,
.banners-effect-5 .banners > div a:hover:before {
opacity: 0;
filter: alpha(opacity=0);
border: 0 double rgba(255, 255, 255, 0.7);
visibility: hidden;
}
.banners-effect-6 .row-no-padding a,
.banners-effect-6 .banners > div a {
display: block;
position: relative;
overflow: hidden;
background: #000;
}
.banners-effect-6 .row-no-padding a img,
.banners-effect-6 .banners > div a img {
backface-visibility: hidden;
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 1s ease 0s, transform 1s ease 0s;
-o-transition: opacity 1s ease 0s, transform 1s ease 0s;
transition: opacity 1s ease 0s, transform 1s ease 0s;
}
.banners-effect-6 .row-no-padding a:hover img,
.banners-effect-6 .banners > div a:hover img {
opacity: 0.8;
filter: alpha(opacity=80);
transform: scale3d(1.1, 1.1, 1);
}
.banners-effect-7 .row-no-padding a,
.banners-effect-7 .banners > div a {
display: block;
position: relative;
overflow: hidden;
}
.banners-effect-7 .row-no-padding a:before,
.banners-effect-7 .banners > div a:before {
position: absolute;
background: rgba(0, 0, 0, 0.3);
width: 0;
top: 0;
left: 50%;
content: "";
transition: all 0.3s ease-in-out 0s;
}
.banners-effect-7 .row-no-padding a:hover:before,
.banners-effect-7 .banners > div a:hover:before {
width: 100%;
left: 0;
top: 0;
height: 100%;
}
.banners-effect-8 .row-no-padding a,
.banners-effect-8 .banners > div a {
display: block;
position: relative;
overflow: hidden;
background: #000;
}
.banners-effect-8 .row-no-padding a:before,
.banners-effect-8 .banners > div a:before,
.banners-effect-8 .row-no-padding a:after,
.banners-effect-8 .banners > div a:after {
bottom: 20px;
content: "";
left: 20px;
opacity: 0;
position: absolute;
right: 20px;
top: 20px;
-webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
-o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
z-index: 1;
}
.banners-effect-8 .row-no-padding a:before,
.banners-effect-8 .banners > div a:before {
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
-o-transform: scale(0, 1);
transform: scale(0, 1);
}
.banners-effect-8 .row-no-padding a:after,
.banners-effect-8 .banners > div a:after {
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
}
.banners-effect-8 .row-no-padding img,
.banners-effect-8 .banners > div img {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 0.35s ease 0s;
-o-transition: opacity 0.35s ease 0s;
transition: opacity 0.35s ease 0s;
}
.banners-effect-8 .row-no-padding a:hover:before,
.banners-effect-8 .banners > div a:hover:before,
.banners-effect-8 .row-no-padding a:hover:after,
.banners-effect-8 .banners > div a:hover:after {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.banners-effect-8 .row-no-padding a:hover img,
.banners-effect-8 .banners > div a:hover img {
opacity: 0.5;
filter: alpha(opacity=50);
}
.banners-effect-9 .row-no-padding a,
.banners-effect-9 .banners > div a {
display: block;
position: relative;
}
.banners-effect-9 .row-no-padding a:before,
.banners-effect-9 .banners > div a:before {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background: #000;
content: '';
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
box-shadow: 0 3px 30px rgba(0,0,0,0.2);
opacity: 0;
}
.banners-effect-9 .row-no-padding a:hover:before,
.banners-effect-9 .banners > div a:hover:before {
opacity: 1;
}
.banners-effect-9 .row-no-padding a img,
.banners-effect-9 .banners > div a img {
opacity: 1;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: perspective(1000px) translate3d(0,0,0);
transform: perspective(1000px) translate3d(0,0,0);
}
.banners-effect-9 .row-no-padding a:hover img,
.banners-effect-9 .banners > div a:hover img {
-webkit-transform: perspective(1000px) translate3d(0,0,21px);
transform: perspective(1000px) translate3d(0,0,21px);
}
.banners-effect-10 .row-no-padding a,
.banners-effect-10 .banners > div a {
display: block;
position: relative;
overflow: hidden;
}
.banners-effect-10 .row-no-padding a:before,
.banners-effect-10 .banners > div a:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 75%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 75%);
content: '';
opacity: 0;
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.banners-effect-10 .row-no-padding a:hover:before,
.banners-effect-10 .banners > div a:hover:before {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.banners-effect-11 .banners > div a {
display: block;
position: relative;
overflow: hidden; }
.banners-effect-11 .banners > div a:hover:before, .banners-effect-11 .banners > div a:hover:after {
width: 100%;
height: 100%; }
.banners-effect-11 .banners > div a:before, .banners-effect-11 .banners > div a:after {
background-color: rgba(0, 0, 0, 0.15);
content: "";
height: 0;
left: 0;
margin: auto;
position: absolute;
width: 0;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
.banners-effect-11 .banners > div a:after {
left: auto;
right: 0;
bottom: 0; }
.banners-effect-12 .banners > div img {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; }
.banners-effect-12 .banners > div img:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%); }
/* @end */