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; }
That works great for displaying the magnifying glass on hover, but how do we make the icon “clickable”?
@sregal If you enable a lightbox plugin, or Jetpack’s Carousel module, the whole image should become clickable.