/* #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; } // .testimonial-vcard .rollover i { // width: 60px; // height: 60px; // } .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 // .testimonials .description-on-hover > .wf-cell .rollover i, // .testimonials .description-on-hover > .wf-cell .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 .testimonial-vcard &, .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: ""; border-radius: 50%; } /*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"); } } // .rollover-video i:after { // .portfolio.small-hover-icons &, // .albums.small-hover-icons &, // .small-hover-icons .dt-portfolio-shortcode &, // .small-hover-icons .dt-albums-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='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"); // } // .portfolio.large-hover-icons &, // .albums.large-hover-icons &, // .large-hover-icons .dt-portfolio-shortcode &, // .large-hover-icons .dt-albums-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='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, .comment-author .rollover i:after //.widget .team-media a.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"); } /*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"); } } // .instagram-photos.dt-gallery-container .rollover.rollover-small 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='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"); // } // .instagram-photos.dt-gallery-container .rollover.rollover-small i:after { // background-position: center center; // background-repeat: no-repeat; // } /*Albums -> Show image miniatures (hover styling)*/ .rollover-thumbnails { position: relative; display: -ms-flexbox; // IE10 .buttons-on-img &, .description-under-image & { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); 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 { 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 { -webkit-border-radius: 50%; border-radius: 50%; } .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 // .mobile-false .scale-on-hover .testimonial-vcard a .alignleft div, // .mobile-false .scale-on-hover .testimonial-vcard a .alignleft { overflow: hidden; } // .mobile-false .scale-on-hover .testimonial-vcard a .alignleft div, // .mobile-false .scale-on-hover .testimonial-vcard a .alignleft, .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 { -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 //.mobile-false .scale-on-hover .testimonial-vcard a.rollover:hover 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; } .old-ie .blur-effect, .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 .mfp-wrap iframe, .filter-grayscale .mfp-wrap embed, .filter-grayscale .mfp-wrap object, .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; }