Add "Click to Enlarge" Over Thumbnail Images

Sometimes a visitor of your page may not be a web expert and may not realize that they can click on the thumbnail images to make them larger. If you would like a button to pop up over each image that says "Click to Enlarge" use the code below. This code works for both thumbnails and the main image. As expected: clicking the thumbnail will load the main image; clicking on the main image will load the lightbox. Add this CSS to your theme's Advanced CSS section:

/* For Desktops and laptops only (do not do on mobile devices)
   Hover Notice on SM Gallery Thumb Image */
@media only screen and (min-width : 1224px) {
  /*Hover Notice on SM Gallery Thumb Image*/
  .sm-user-ui .sm-gallery .sm-tile-photo a:hover:after {
    content: 'Click to Enlarge' !important;
    z-index: 9999 !important;
    position: absolute;
    bottom: 0px;
    left: 0px; 
    font-size:10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.6);
    padding: 3px 5px 3px 5px; /* top right bottom left */
    border:solid 1px #595959;
    overflow: visible;
  }
}