images in gallery now have hover effect when using macro

macros.py

@@ -19,7 +19,7 @@ def lightgallery(links):
             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

@@ -195,7 +195,7 @@ else:
         $(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,
@@ -213,7 +213,12 @@ else:
                     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

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

static/css/style.css

@@ -15,6 +15,7 @@ hr {
     border-bottom-color: purple; /* green; */ /* orange; */
     background-color: white;
     width: 100%;
+    z-index: 2;
 }
 
 #content {
@@ -131,3 +132,21 @@ span.font-small {
     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%);
+}