17 / 91
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; } }
- No Comments
All images © 2007-2021 Aaron Meyers