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; 
    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;


  • Miguel Alonso

    on August 28, 2015

    Many thanks for this and the rest of the codes. Great job!!
    One question: Is there anyway to make it so it only works with the thumbnails on the Smugmug layout, and not for example on the Collage layout? It seems it affects to all images, not only Smugmug layout.

  • DelightfulLight

    on October 16, 2013

    Thanks again!!!

Powered by SmugMug Owner Log In