File: /var/www/concertium.com/public_html/wp-content/themes/dt-the7/css/static-less/image-hovers.less
/* #Images Styling & Hovers
================================================== */
.rollover,
.rollover-video,
.post-rollover,
.rollover-project > a {
position: relative;
display: block;
line-height: 0;
text-decoration: none;
}
.rollover:hover {
text-decoration: none;
}
.rollover img {
max-width: 100%;
height: auto;
}
.rsShor .rollover-video {
position: static;
}
.gallery-item .gallery-icon .rollover {
display: inline-block;
}
.format-gallery .rollover {
overflow: hidden;
}
/*rollover background*/
.rollover i,
.rollover-video i,
.post-rollover i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.rollover i,
.post-rollover i,
.rollover-video i:after,
.rollover-thumbnails,
.rollover-video .video-icon,
.rollover-video i,
.rollover-content-container,
.hover-style-two .links-container,
.hover-style-one .links-container,
.hover-style-two .rollover-thumbnails,
.hover-style-one .rollover-thumbnails,
.hover-style-one .rollover-project > a:after,
.hover-style-three .rollover-project > a:after {
-webkit-transition: all 450ms ease;
transition: all 450ms ease;
}
/*hide default rollover when turn on description on hover*/
.description-on-hover > .wf-cell .rollover i,
.description-on-hover > .wf-cell .rollover i:after {
visibility: hidden;
}
.description-on-hover > .wf-cell .forward-post .rollover i:after,
.description-on-hover > .wf-cell .forward-post .rollover i,
.description-on-hover > .wf-cell .description-off .rollover i,
.description-on-hover > .wf-cell .description-off .rollover i:after
{
visibility: visible;
}
/*rollover icon*/
.rollover i:after,
.project-list-media .rollover-video i:after {
position: absolute;
width: 50px;
height: 50px;
.small-hover-icons & {
top: 3px;
right: 3px;
}
.large-hover-icons &,
.small-hover-icons .comment-author & {
top: 0;
right: 0;
width: 100%;
height: 100%;
}
background-position: center center;
background-repeat: no-repeat;
content: "";
}
.post-rollover i:after,
.vc_box_circle .rollover i:after,
.vc_box_circle i:after,
.vc_box_outline_circle i:after,
.vc_box_border_circle i:after,
.vc_box_shadow_circle i:after,
.vc_box_shadow_border_circle i:after,
.vc_box_shadow_circle i:after,
.vc_box_shadow_border_circle i:after,
.vc_box_shadow_border_circle i:after,
.small-hover-icons .round-images .rollover i:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
content: "";
}
.disabled-hover-icons .rollover i:after,
.disabled-hover-icons .post-rollover i:after {
display: none;
}
#page .rollover-small i:after,
.post-rollover i:after,
.blog .dt-format-gallery.dt-gallery-container .rollover i:after,
.dt-blog-shortcode .dt-format-gallery.dt-gallery-container .rollover i:after {
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
}
/*video hover styling*/
.rollover-video .video-icon {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background-position: center center;
background-repeat: no-repeat;
}
.rollover-video .video-icon:before {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
background-color: rgba(0,0,0,0.4);
background-position: 30px center;
background-repeat: no-repeat;
content: "";
.static-border-radius;
}
/*show rollover on hover*/
.mobile-false .rollover:hover i,
.mobile-false .images-list:hover i,
.mobile-false .post-rollover:hover i,
.rollover-video:hover i {
display: block;
opacity: 1;
}
.rollover-video:hover .video-icon:before,
.images-list:hover .rollover-video .video-icon:before {
background-color: rgba(0,0,0,0.4);
opacity: 1;
}
.rollover-video .video-icon:hover {
opacity: 1;
}
/*Details rollover icon*/
.rollover i:after {
.small-hover-icons & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' fill='white' xml:space='preserve'%3E%3Cpolygon points='16,7 9,7 9,0 7,0 7,7 0,7 0,9 7,9 7,16 9,16 9,9 16,9 '/%3E%3C/svg%3E");
}
.large-hover-icons & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' fill='white' xml:space='preserve'%3E%3Cpolygon points='16,7 9,7 9,0 7,0 7,7 0,7 0,9 7,9 7,16 9,16 9,9 16,9 '/%3E%3C/svg%3E");
}
}
.dt-format-gallery.dt-gallery-container .rollover i:after {
.blog.large-hover-icons &,
.large-hover-icons .dt-blog-shortcode & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' fill='white' xml:space='preserve'%3E%3Cpolygon points='14,-0.02 14,0 8.993,0 8.993,2 14,2 14,6.98 16,6.98 16,-0.02 '/%3E%3Cpolygon points='2,9 0,9 0,16 2,16 2,15.98 7.007,15.98 7.007,13.98 2,13.98 '/%3E%3C/svg%3E");
}
}
/*Zoom rollover icon*/
.rollover-zoom i:after,
.format-photo .rollover i:after {
.small-hover-icons & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' fill='white' xml:space='preserve'%3E%3Cpolygon points='14,-0.02 14,0 8.993,0 8.993,2 14,2 14,6.98 16,6.98 16,-0.02 '/%3E%3Cpolygon points='2,9 0,9 0,16 2,16 2,15.98 7.007,15.98 7.007,13.98 2,13.98 '/%3E%3C/svg%3E");
}
.large-hover-icons & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' fill='white' xml:space='preserve'%3E%3Cpolygon points='14,-0.02 14,0 8.993,0 8.993,2 14,2 14,6.98 16,6.98 16,-0.02 '/%3E%3Cpolygon points='2,9 0,9 0,16 2,16 2,15.98 7.007,15.98 7.007,13.98 2,13.98 '/%3E%3C/svg%3E");
}
}
/*rollover icon for small photos*/
.rollover-small i:after,
.post-rollover i:after
{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' fill='white' xml:space='preserve'%3E%3Cpolygon points='16,7 9,7 9,0 7,0 7,7 0,7 0,9 7,9 7,16 9,16 9,9 16,9 '/%3E%3C/svg%3E");
}
.comment-author .rollover i:after {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='44px' height='44px' viewBox='0 0 44 44' enable-background='new 0 0 44 44' xml:space='preserve'%3E%3Cpolygon fill='white' points='28,28.01 16,28.01 16,16.01 19.011,16.01 19.011,14.01 16,14.01 14.011,14.01 14,14.01 14,28.01 14,30.01 16,30.01 30,30.01 30,29.999 30,28.01 30,24.999 28,24.999 '/%3E%3Cpolygon fill='white' points='28,13.99 28,14.01 22.993,14.01 22.993,16.01 26.637,16.01 20.5,22.146 21.863,23.51 28,17.374 28,20.99 30,20.99 30,13.99 '/%3E%3C/svg%3E");
}
/*Video rollover icon*/
.rollover-video .video-icon:before,
.blog .format-video .rollover i:after,
.dt-blog-shortcode .format-video .rollover i:after,
.rollover-video i:after {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve' fill='white'%3E%3Cpath d='M3.125,4L10.2,8.001L3.125,12V3.8 M1,0v16l13-8L1,0L1,0z'/%3E%3C/svg%3E");
}
.rollover-video i:after {
.small-hover-icons & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve' fill='white'%3E%3Cpath d='M3.125,4L10.2,8.001L3.125,12V3.8 M1,0v16l13-8L1,0L1,0z'/%3E%3C/svg%3E");
}
.large-hover-icons & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve' fill='white'%3E%3Cpath d='M3.125,4L10.2,8.001L3.125,12V3.8 M1,0v16l13-8L1,0L1,0z'/%3E%3C/svg%3E");
}
}
.dt-format-gallery.dt-gallery-container .rollover-video i:after {
.blog.large-hover-icons &,
.large-hover-icons .dt-blog-shortcode & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve' fill='white'%3E%3Cpath d='M3.125,4L10.2,8.001L3.125,12V3.8 M1,0v16l13-8L1,0L1,0z'/%3E%3C/svg%3E");
}
}
.rollover i:after {
.blog.small-hover-icons .format-video &,
.small-hover-icons .dt-blog-shortcode .format-video & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve' fill='white'%3E%3Cpath d='M3.125,4L10.2,8.001L3.125,12V3.8 M1,0v16l13-8L1,0L1,0z'/%3E%3C/svg%3E");
}
.blog.large-hover-icons .format-video &,
.large-hover-icons .dt-blog-shortcode .format-video & {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve' fill='white'%3E%3Cpath d='M3.125,4L10.2,8.001L3.125,12V3.8 M1,0v16l13-8L1,0L1,0z'/%3E%3C/svg%3E");
}
}
/*Albums -> Show image miniatures (hover styling)*/
.rollover-thumbnails {
position: relative;
display: -ms-flexbox; // IE10
.buttons-on-img &,
.description-under-image & {
position: absolute;
.centering-mixin;
margin: 0;
z-index: 9;
opacity: 0;
}
width: 142px;
height: 116px;
}
.disabled-hover-icons .blog-media .rollover-thumbnails {
display: none;
}
.mobile-false .rollover:hover .rollover-thumbnails,
.mobile-true .rollover.is-clicked .rollover-thumbnails,
.mobile-true .rollover-content.is-clicked .rollover-thumbnails {
opacity: 1;
}
.rollover-thumbnails span {
position: absolute;
top: 0;
left: 0;
width: 90px;
height: 90px !important;
border: 3px solid #fff;
-webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
.box-sizing (border-box);
}
.rollover-thumbnails span,
.rollover-thumbnails span img {
.static-border-radius;
}
.rollover-thumbnails .r-thumbn-1 {
top: 25px;
left: 49px;
z-index: 102;
}
.rollover-thumbnails .r-thumbn-2 {
top: 0;
left: 42px;
width: 50px;
height: 50px !important;
z-index: 100;
}
.rollover-thumbnails .r-thumbn-3 {
top: 29px;
left: 0px;
width: 70px;
height: 70px !important;
z-index: 101;
}
.rollover-thumbnails span i {
display: none !important;
}
.rollover.rollover-thumbnails-on i:after{
display: none;
}
/* #Styling -> Scale
================================================== */
.mobile-false .scale-on-hover a.rollover,
.mobile-false .scale-on-hover a.post-rollover,
.mobile-false .scale-on-hover div.rollover-video,
.mobile-false .scale-on-hover .hover-style-one .rollover-project > a,
.mobile-false .scale-on-hover .buttons-on-img > a,
.mobile-false .scale-on-hover .hover-fade .rollover-project > a
{
overflow: hidden;
}
.mobile-false .scale-on-hover .rollover.vc_box_circle,
.mobile-false .scale-on-hover .vc_box_circle,
.mobile-false .scale-on-hover a.post-rollover,
.mobile-false .scale-on-hover .round-images .rollover,
.mobile-false .scale-on-hover .shortcode-single-image .rollover {
-webkit-backface-visibility: hidden;
-webkit-transform: translatez(0);
}
.mobile-false .scale-on-hover a.rollover img,
.mobile-false .scale-on-hover a.post-rollover img,
.mobile-false .scale-on-hover div.rollover-video img,
.mobile-false .scale-on-hover .hover-style-one .rollover-project > a img,
.mobile-false .scale-on-hover .buttons-on-img > a img,
.mobile-false .scale-on-hover .hover-fade .rollover-project > a img,
.mobile-false .scale-on-hover .hover-scale .rollover-project > a img {
-webkit-transition: -webkit-transform .5s ease;
transition: transform .5s ease;
&.iso-lazy-load,
&.lazy-load,
&.jgrid-lazy-load {
-webkit-transition: -webkit-transform .5s ease, opacity 0.35s ease-out;
transition: transform .5s ease, opacity 0.35s ease-out;
}
}
.mobile-false .scale-on-hover a.rollover:hover > img,
.mobile-false .scale-on-hover a.rollover:hover > div > img,
.mobile-false .scale-on-hover a.post-rollover:hover img,
.mobile-false .scale-on-hover div.rollover-video:hover img,
.mobile-false .scale-on-hover .hover-style-one .rollover-project:hover > a img,
.mobile-false .scale-on-hover .buttons-on-img:hover > a > img,
.mobile-false .scale-on-hover .hover-fade .rollover-project:hover > a img,
.mobile-false .scale-on-hover .hover-scale .rollover-project:hover > a img
{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.mobile-false .is-safari.scale-on-hover .round-images a.rollover:hover > img,
.mobile-false .is-safari.scale-on-hover .round-images a.rollover:hover > div,
.mobile-false .is-safari.scale-on-hover .round-images a.post-rollover:hover img,
.mobile-false .is-safari.scale-on-hover .comment-author a.rollover:hover > img,
.mobile-false .scale-on-hover a.rollover.vc_single_image-wrapper > img,
.mobile-false .is-safari.scale-on-hover .rollover.vc_single_image-wrapper:hover > img,
.mobile-false .scale-on-hover .hover-fade.woo-hover .rollover-project:hover > a img,
.mobile-false .scale-on-hover .woo-hover .buttons-on-img:hover > a > img {
-webkit-transform: scale(1);
transform: scale(1);
}
/* #Styling -> Blur
================================================== */
.blur-this {
position: relative;
}
.mobile-false .blur-this .blur-effect,
.mobile-false .blur-this canvas,
.blur-this .blur-effect {
position: absolute;
left: 0;
top: 0;
max-width: 100%;
width: 100% !important;
height: 100% !important;
opacity: 0;
display: none; //hide js blur
}
.rollover,
.post-rollover,
.rollover-project > a {
.mobile-false .image-blur & {
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
}
}
.rollover img,
.post-rollover img,
.rollover-project img {
.mobile-false .image-blur & {
transition: 0.5s;
-webkit-perspective:1000;
-webkit-backface-visibility:hidden;
}
}
.rollover:hover img,
.post-rollover:hover img,
.hover-style-one .rollover-project:hover a > img,
.hover-fade .rollover-project:hover a > img,
.hover-scale .rollover-project:hover a > img,
.hover-grid-reverse .rollover-project:hover a > img,
.hover-grid .rollover-project:hover a > img,
.buttons-on-img:hover a > img,
.images-list:hover .blur-this a > img {
.mobile-false .image-blur & {
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
}
.rollover:hover .rollover-thumbnails img {
.mobile-false .image-blur & {
filter: none;
-webkit-filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;
}
}
.images-list .blur-this .blur-effect {
z-index: 9;
}
.images-list .blur-this i {
z-index: 10;
}
.mobile-false .blur-this:hover .blur-effect,
.hover-style-one .rollover-project:hover .blur-effect,
.hover-fade .rollover-project:hover .blur-effect,
.hover-style-one .fs-entry:hover .blur-effect,
.hover-fade .fs-entry:hover .blur-effect,
.hover-scale .rollover-project:hover .blur-effect,
.hover-grid-reverse .rollover-project:hover .blur-effect,
.hover-grid .rollover-project:hover .blur-effect,
.buttons-on-img:hover .blur-effect,
.images-list:hover .blur-this .blur-effect,
.images-list:hover .blur-this i {
opacity: 1;
}
.hover-style-one .rollover:hover i,
.hover-style-three .rollover-project .blur-effect {
display: none;
}
.mobile-false .blur-this .blur-effect,
.mobile-false .blur-this canvas,
.blur-this .blur-effect {
-webkit-transition: opacity 300ms ease;
transition: opacity 300ms ease;
}
/* #Styling -> Grayscale
================================================== */
.filter-grayscale .royalSlider img,
.filter-grayscale .content img,
.filter-grayscale .sidebar img,
.filter-grayscale .footer img,
.filter-grayscale .shortcode-banner,
.filter-grayscale .map-container,
.filter-grayscale iframe,
.filter-grayscale embed,
.filter-grayscale object,
.filter-grayscale-static .royalSlider img,
.filter-grayscale-static .content img,
.filter-grayscale-static .sidebar img,
.filter-grayscale-static .footer img,
.filter-grayscale-static .shortcode-banner,
.filter-grayscale-static .map-container,
.filter-grayscale-static iframe,
.filter-grayscale-static embed,
.filter-grayscale-static object {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
/* Make sure that it will not flicker in Desktop Safari due to usage of CSS3 animation in RoyalSlider */
}
.mobile-false .filter-grayscale .royalSlider img,
.mobile-false .filter-grayscale .content img,
.mobile-false .filter-grayscale .sidebar img,
.mobile-false .filter-grayscale .footer img,
.mobile-false .filter-grayscale .shortcode-banner,
.mobile-false .filter-grayscale .map-container,
.mobile-false .filter-grayscale iframe,
.mobile-false .filter-grayscale embed,
.mobile-false .filter-grayscale object,
.mobile-false .filter-grayscale-static .royalSlider img,
.mobile-false .filter-grayscale-static .content img,
.mobile-false .filter-grayscale-static .sidebar img,
.mobile-false .filter-grayscale-static .footer img,
.mobile-false .filter-grayscale-static .shortcode-banner,
.mobile-false .filter-grayscale-static .map-container,
.mobile-false .filter-grayscale-static iframe,
.mobile-false .filter-grayscale-static embed,
.mobile-false .filter-grayscale-static object {
-webkit-backface-visibility: visible !important;
//-webkit-transform: inherit !important;
}
/* .filter-grayscale img:hover, */
.filter-grayscale img.filter-disable,
.filter-grayscale .filter-disable img,
.filter-grayscale img.dt-hovered,
.filter-grayscale .dt-hovered img,
.filter-grayscale .rollover:hover img,
.filter-grayscale .cs-style-3 .link:hover img,
.filter-grayscale .rollover-video:hover img,
.filter-grayscale .post-rollover:hover img,
.filter-grayscale .fs-entry:hover img,
.filter-grayscale .rsThumb:hover img,
.filter-grayscale .royalSlider:hover img,
.filter-grayscale .content img:hover,
.filter-grayscale .sidebar img:hover,
.filter-grayscale .footer img:hover,
.filter-grayscale .shortcode-banner:hover,
.filter-grayscale .content .rev_slider_wrapper:hover img,
.filter-grayscale .map-container:hover,
.filter-grayscale iframe:hover,
.filter-grayscale embed:hover,
.filter-grayscale object:hover,
.filter-grayscale .rollover-project:hover img,
.filter-grayscale .buttons-on-img:hover img,
.filter-grayscale #branding-bottom img,
.filter-grayscale-static #branding-bottom img {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
filter: none;
filter: transparent;
}