diff --git a/site/themes/citra-bs-theme/layouts/_default/baseof.html b/site/themes/citra-bs-theme/layouts/_default/baseof.html
index 97466b5..ba141c1 100755
--- a/site/themes/citra-bs-theme/layouts/_default/baseof.html
+++ b/site/themes/citra-bs-theme/layouts/_default/baseof.html
@@ -116,6 +116,15 @@
         </div>
 
         <script src="{{ .Site.BaseURL }}/js/script.js"></script>
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" type="text/css" />
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js" type="text/javascript"></script>
+
+		<script type="text/javascript">
+			window.addEventListener("DOMContentLoaded", function() {
+			baguetteBox.run('.is-img-preview');
+			});
+		</script>
+
         {{ block "scripts" . }}{{ end }}
 
         {{ if in .Params.js "juxtapose" }}
diff --git a/site/themes/citra-bs-theme/layouts/shortcodes/sidebyside.html b/site/themes/citra-bs-theme/layouts/shortcodes/sidebyside.html
index 8bb3119..2046042 100644
--- a/site/themes/citra-bs-theme/layouts/shortcodes/sidebyside.html
+++ b/site/themes/citra-bs-theme/layouts/shortcodes/sidebyside.html
@@ -6,6 +6,7 @@
 
 <div class="container" style="width: 100%;">
     {{ $.Scratch.Set "size" (div 12 (len $figures)) }}
+    <div class="is-img-preview">
     {{ range $figure := $figures }}
         {{ $.Scratch.Set "src" (index (split $figure "=") 0) }}
         {{ $.Scratch.Set "title" (index (split $figure "=") 1) }}
@@ -20,7 +21,9 @@
                         </video>
                     </div>
                 {{ else if eq $type "image" }}
-                    <img src="{{ printf "%s%s" $path ($.Scratch.Get "src") }}" alt="{{ $.Scratch.Get "title" }}" />
+                    <a href="{{ printf "%s%s" $path ($.Scratch.Get "src") }}" title="{{ $.Scratch.Get "title" }}">
+                        <img src="{{ printf "%s%s" $path ($.Scratch.Get "src") }}" alt="{{ $.Scratch.Get "title" }}" />
+                    </a>
                 {{ else if eq $type "imagelink" }}
                     <a href="{{ $.Scratch.Get "link" }}" style="border-bottom-style: none;" >
                         <img src="{{ printf "%s%s" $path ($.Scratch.Get "src") }}" alt="{{ $.Scratch.Get "title" }}" />
@@ -34,4 +37,5 @@
             </figure>
         </div>
     {{ end }}
+    </div>
 </div>