images in gallery now have hover effect when using macro

macros.py

             link, alt = l
             x = link.rfind('.')
             img = link[:x] + '_small' + link[x:]
-        print '<a href="' + link + '"><img src="' + img + '" alt="' + alt + '"></a>'
+        print '<div class="border" data-src="' + link + '"><a href="' + link + '"><img class="pic" src="' + img + '" alt="' + alt + '"></a></div>'
     print '</div>'
 
 # -----------------------------------------------------------------------------

page.html

         $(document).ready(function() {
             var lg = document.getElementsByClassName("lightgallery");
             for (var i = 0; i < lg.length; i++) {
-                $(lg.item(i)).lightGallery({
+                var settings = {
                     loadYoutubeThumbnail: true,
                     youtubeThumbSize: 'mqdefault',
                     loadVimeoThumbnail: true,
                     animateThumb: true,
                     showThumbByDefault: false,
                     galleryId: i
-                });
+                };
+                var d = lg.item(i);
+                if ($(d).find(".border").length > 0) {
+                    settings.selector = '.border';
+                }
+                $(d).lightGallery(settings);
             }
         });
     </script>

static/css/print.css

     display: none;
 }
 
+.border {
+    display: inline-block;
+    border-radius: 10px;
+}
+
 pre {
     max-height: 100%;
     font-size: 0.9em;

static/css/style.css

     border-bottom-color: purple; /* green; */ /* orange; */
     background-color: white;
     width: 100%;
+    z-index: 2;
 }
 
 #content {
     font-size: 0.6em;
 }
 
+.border {
+    overflow: hidden;
+    height: auto;
+    display: inline-block;
+    border-radius: 10px;
+    vertical-align: middle;
+    margin: 3px 0 3px 0;
+}
+
+.border .pic {
+    transition: transform 0.1s;
+    vertical-align: bottom;
+}
+
+.border:hover .pic {
+    transform: scale(1.1, 1.1);
+    filter: brightness(75%);
+}