diff --git a/res/app/components/stf/image-onload/image-onload-animate-directive.js b/res/app/components/stf/image-onload/image-onload-animate-directive.js
new file mode 100644
index 00000000..01085544
--- /dev/null
+++ b/res/app/components/stf/image-onload/image-onload-animate-directive.js
@@ -0,0 +1,13 @@
+module.exports = function imageOnloadAnimateDirective($parse, $animate) {
+  return {
+    restrict: 'A',
+    link: function (scope, element, attrs) {
+      $animate.addClass(element, 'ng-image-not-loaded')
+      element.bind('load', function() {
+        $animate.removeClass(element, 'ng-image-not-loaded')
+//        scope.$eval(attrs.imageOnload)
+        console.log('image is loaded')
+      })
+    }
+  }
+}
diff --git a/res/app/components/stf/image-onload/image-onload-directive.js b/res/app/components/stf/image-onload/image-onload-directive.js
new file mode 100644
index 00000000..59792088
--- /dev/null
+++ b/res/app/components/stf/image-onload/image-onload-directive.js
@@ -0,0 +1,11 @@
+module.exports = function imageOnloadDirective($parse) {
+  return {
+    restrict: 'A',
+    link: function (scope, element, attrs) {
+      element.bind('load', function() {
+        scope.$eval(attrs.imageOnload)
+//        console.log('image is loaded')
+      })
+    }
+  }
+}
diff --git a/res/app/components/stf/image-onload/image-onload-spec.js b/res/app/components/stf/image-onload/image-onload-spec.js
new file mode 100644
index 00000000..dbf62215
--- /dev/null
+++ b/res/app/components/stf/image-onload/image-onload-spec.js
@@ -0,0 +1,23 @@
+describe('imageOnload', function () {
+
+  beforeEach(module('stf.image-onload'));
+
+  var scope, compile;
+
+  beforeEach(inject(function ($rootScope, $compile) {
+    scope = $rootScope.$new();
+    compile = $compile;
+  }));
+
+  it('should ...', function () {
+
+    /* 
+     To test your directive, you need to create some html that would use your directive,
+     send that through compile() then compare the results.
+
+     var element = compile('<div image-onload name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});
\ No newline at end of file
diff --git a/res/app/components/stf/image-onload/index.js b/res/app/components/stf/image-onload/index.js
new file mode 100644
index 00000000..d55c8780
--- /dev/null
+++ b/res/app/components/stf/image-onload/index.js
@@ -0,0 +1,5 @@
+module.exports = angular.module('stf.image-onload', [
+
+])
+  .directive('imageOnload', require('./image-onload-directive'))
+  .directive('imageOnloadAnimate', require('./image-onload-animate-directive'))
diff --git a/res/app/control-panes/screenshots/index.js b/res/app/control-panes/screenshots/index.js
index bd20919b..8b74d077 100644
--- a/res/app/control-panes/screenshots/index.js
+++ b/res/app/control-panes/screenshots/index.js
@@ -1,7 +1,7 @@
 require('./screenshots.css')
 
 module.exports = angular.module('stf.screenshots', [
-
+  require('stf/image-onload').name
 ])
   .run(["$templateCache", function ($templateCache) {
     $templateCache.put('control-panes/screenshots/screenshots.jade',
diff --git a/res/app/control-panes/screenshots/screenshots-controller.js b/res/app/control-panes/screenshots/screenshots-controller.js
index 89e4de1a..4d4727d4 100644
--- a/res/app/control-panes/screenshots/screenshots-controller.js
+++ b/res/app/control-panes/screenshots/screenshots-controller.js
@@ -24,8 +24,13 @@ module.exports = function ScreenshotsCtrl($scope, SettingsService) {
   $scope.takeScreenShot = function () {
     $scope.control.screenshot().then(function(result) {
       $scope.$apply(function() {
-        $scope.screenshots.push(result)
+        $scope.screenshots.unshift(result)
       })
     })
   }
+
+  $scope.imageLoaded = function (shot) {
+    shot.ready = true
+    console.log('[called')
+  }
 }
diff --git a/res/app/control-panes/screenshots/screenshots.css b/res/app/control-panes/screenshots/screenshots.css
index 3d7464eb..985e557c 100644
--- a/res/app/control-panes/screenshots/screenshots.css
+++ b/res/app/control-panes/screenshots/screenshots.css
@@ -1,3 +1,20 @@
 .stf-screenshots {
 
-}
\ No newline at end of file
+}
+
+.screenshot-image {
+  display:block!important;
+}
+
+.stf-screenshots .screenshot-image {
+  -webkit-transition: 1000ms;
+  transition: 1000ms;
+}
+
+.stf-screenshots .screenshot-image.ng-image-not-loaded {
+  opacity: 0;
+}
+
+.stf-screenshots .screenshot-image {
+  opacity: 1;
+}
diff --git a/res/app/control-panes/screenshots/screenshots.jade b/res/app/control-panes/screenshots/screenshots.jade
index bd54f93b..dd3e26f6 100644
--- a/res/app/control-panes/screenshots/screenshots.jade
+++ b/res/app/control-panes/screenshots/screenshots.jade
@@ -1,4 +1,4 @@
-.widget-container.fluid-height(ng-controller='ScreenshotsCtrl')
+.widget-container.fluid-height(ng-controller='ScreenshotsCtrl').stf-screenshots
   .heading
     button.btn.btn-sm.btn-primary-outline(ng-click='takeScreenShot()', title='{{"Take Screenshot"|translate}}')
       i.fa.fa-camera
@@ -30,10 +30,11 @@
 
   .widget-content.padded
     nothing-to-show(message='{{"No screenshots taken"|translate}}', icon='fa-camera', ng-show='!screenshots.length')
+
     ul.screenshots-icon-view.clear-fix
-      li(ng-repeat='shot in screenshots').cursor-select
+      li.screenshots-icon-item(ng-repeat='shot in screenshots').cursor-select
         h5 {{ shot.body.date | date:'yyyy/MM/dd HH:mm:ss'  }}
         a(ng-href='{{ shot.body.href }}', target='_blank')
-          img(ng-src='{{ shot.body.href + shotSizeUrlParameter() }}')
+          img(ng-src='{{ shot.body.href + shotSizeUrlParameter() }}', image-onload-animate).screenshot-image
 
     .clearfix