diff --git a/pinry/static/css/lightbox.css b/pinry/static/css/lightbox.css
index 528eaa4..03a43c8 100644
--- a/pinry/static/css/lightbox.css
+++ b/pinry/static/css/lightbox.css
@@ -1,6 +1,5 @@
 .lightbox-background {
     background: rgba(0, 0, 0, 0.7);
-    display: none;
     left: 0;
     right: 0;
     top: 0;
@@ -23,7 +22,6 @@
 
 .lightbox-wrapper img {
     max-width: 600px;
-    display: none;
     -webkit-border-top-right-radius: 3px;
      -webkit-border-top-left-radius: 3px;
         -moz-border-radius-topright: 3px;
diff --git a/pinry/templates/includes/lightbox-vue.html b/pinry/templates/includes/lightbox-vue.html
index db97856..64858ce 100644
--- a/pinry/templates/includes/lightbox-vue.html
+++ b/pinry/templates/includes/lightbox-vue.html
@@ -1,9 +1,10 @@
 {% verbatim %}
     <script id="lightbox-template" type="text/x-template">
+      <transition name="fade">
         <div class="lightbox-background">
             <div class="lightbox-wrapper">
                 <div class="lightbox-image-wrapper">
-                    <img class="lightbox-image" src="{{ pin.image.image }}" />
+                    <img class="lightbox-image" :src="pin.image.image" />
                 </div>
                 <div class="lightbox-data clearfix">
                   <div class="description" v-if="pin.description">
@@ -14,7 +15,7 @@
                   </div>
                   <div class="text pull-left">
                       <span class="dim">pinned by</span> {{ pin.submitter.username }}
-                      <template v-if="pin.tags">
+                      <template v-if="pin.tags.length != 0">
                         <br /><span class="dim">in</span>
                         <template v-for="tag in pin.tags">
                             <span class="tag">
@@ -33,5 +34,6 @@
                 </div>
             </div>
         </div>
+      </transition>
     </script>
 {% endverbatim %}