diff --git a/static/css/style.css b/static/css/style.css
index da19daa..fa9685c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -205,6 +205,12 @@ main {
 #game-grid .mdl-card img {
     height: 100%;
     width: 100%;
+    opacity: 0;
+    transition: opacity .3s;
+    z-index: -1;
+}
+#game-grid .mdl-card img.fade-in {
+    opacity: 1;
 }
 #game-grid .game-title {
     position: absolute;
diff --git a/static/js/index.js b/static/js/index.js
index 2f80823..338bcc8 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -537,11 +537,10 @@ function showApps(host) {
       }
       host.getBoxArt(app.id).then(function(resolvedPromise) {
         // put the box art into the image holder
-        $(outerDiv).append($("<img \>", {
-          src: resolvedPromise,
-          name: app.title
-        }));
-
+        var img = new Image();
+        img.src = resolvedPromise;
+        img.onload = e => img.classList.add('fade-in');
+        $(outerDiv).append(img);
       }, function(failedPromise) {
         console.log('%c[index.js, showApps]', 'color: green;', 'Error! Failed to retrieve box art for app ID: ' + app.id + '. Returned value was: ' + failedPromise, '\n Host object:', host, host.toString());
         $(outerDiv).append($("<img \>", {