Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    This seems to be addedvia CSS by the theme. You can check the theme’s stylesheet here, and look for all gallery customizations. Here is the part about the glass icon:

    .gal > a, .tiled-gallery-item {
    	position: relative;
    	display: block;
    	line-height: 1;
    }
    
    .gal > a:after, .tiled-gallery-item:after {
    	content: " ";
    	position: absolute;
    	background: url("http://demo.cssignitercom.netdna-cdn.com/preview/memories/wp-content/themes/wp_memories5/images/image-overlay-link.png") no-repeat;
    	width: 46px;
    	height: 46px;
    
    	top: 40%;
    	left: 50%;
    	opacity: 0;
    	margin: -23px 0 0 -23px;
    	cursor: pointer;
    
    	-webkit-transition: all 0.2s ease;
    	-moz-transition: all 0.2s ease;
    	-ms-transition: all 0.2s ease;
    	-o-transition: all 0.2s ease;
    	transition: all 0.2s ease;
    }
    
    .gal.zoom > a:after, .tiled-gallery-item:after {
    	cursor: pointer;
    	background: url("http://demo.cssignitercom.netdna-cdn.com/preview/memories/wp-content/themes/wp_memories5/images/image-overlay-zoom.png") no-repeat;
    }
    
    .collage { padding: 5px; }
    .collage li { margin: 0; padding: 0;}
    
    .gal img, .tiled-gallery-item img {
    	-webkit-transition: all 0.2s ease;
    	-moz-transition: all 0.2s ease;
    	-ms-transition: all 0.2s ease;
    	-o-transition: all 0.2s ease;
    	transition: all 0.2s ease;
    }
    
    .gal:hover > a:after, .tiled-gallery-item:hover:after {
    	opacity: 1;
    	top: 50%;
    }
    
    .gal:hover img, .tiled-gallery-item:hover img {
    	opacity: 0.5;
    }
    
    .gal figcaption  {
    	background: #131313;
    	padding: 8px 12px;
    	border: 1px solid #2E2E2E;
    	border-top-width: 0;
    }
    
    .tiled-gallery-caption {
    	background: #131313 !important;
    	background: rgba(0,0,0,0.6) !important;
    	color: #FFF !important;
    }
    
    .collage-item { margin: 5px; }
    
    .gallery-item { margin: 0 0 10px 0; }
    Thread Starter Kolomir

    (@kolomir)

    Thank you.

    That works great for displaying the magnifying glass on hover, but how do we make the icon “clickable”?

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    @sregal If you enable a lightbox plugin, or Jetpack’s Carousel module, the whole image should become clickable.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Tiled Gallery hover icon’ is closed to new replies.