diff --git a/HISTORY.rst b/HISTORY.rst
index 5ff9715c60..50e2e1c414 100644
--- a/HISTORY.rst
+++ b/HISTORY.rst
@@ -13,6 +13,7 @@
   Add date and time to the production logger.
 - Add support for generating setup.py from a template. GitLab
   #149 #200.
+- Add fade in animation to document images.
 
 2.6.2 (2017-07-19)
 ==================
diff --git a/docs/releases/2.6.3.rst b/docs/releases/2.6.3.rst
index 3c022bf3b1..5d45ba39dc 100644
--- a/docs/releases/2.6.3.rst
+++ b/docs/releases/2.6.3.rst
@@ -24,6 +24,7 @@ Changes
   Add date and time to the production logger.
 - Add support for generating setup.py from a template. GitLab
   #149 #200.
+- Add fade in animation to document images.
 
 Removals
 --------
diff --git a/mayan/apps/appearance/static/appearance/js/base.js b/mayan/apps/appearance/static/appearance/js/base.js
index 1adda6e22b..f725c0fcbe 100644
--- a/mayan/apps/appearance/static/appearance/js/base.js
+++ b/mayan/apps/appearance/static/appearance/js/base.js
@@ -153,7 +153,7 @@ MayanImage.intialize = function () {
         appear: function(elements_left, settings) {
             new MayanImage({element: $(this)});
         },
-        threshold: 400
+        threshold: 400,
     });
 
     $('img.lazy-load-carousel').lazyload({
@@ -165,11 +165,15 @@ MayanImage.intialize = function () {
     });
 
     $('.lazy-load').on('load', function() {
+        $(this).hide();
+        $(this).fadeIn();
         $(this).siblings('.spinner-container').remove();
         $(this).removeClass('lazy-load pull-left');
     });
 
     $('.lazy-load-carousel').on('load', function() {
+        $(this).hide();
+        $(this).fadeIn();
         $(this).siblings('.spinner-container').remove();
         $(this).removeClass('lazy-load-carousel pull-left');
     });