diff --git a/theme/static/src/scss/homepage.scss b/theme/static/src/scss/homepage.scss
index b7dfbd5..f7cac4f 100644
--- a/theme/static/src/scss/homepage.scss
+++ b/theme/static/src/scss/homepage.scss
@@ -1,13 +1,3 @@
-.portfolio-box {
-  background-color: $brand-grey-dark;
-  max-width: initial;
-  min-height: 300px;
-
-  .portfolio-box-caption {
-    background-color: transparentize($brand-orange, 0.3);
-  }
-}
-
 header {
   min-height: 100%;
 }
diff --git a/theme/static/src/scss/index.scss b/theme/static/src/scss/index.scss
index 87cadf8..4c2e372 100644
--- a/theme/static/src/scss/index.scss
+++ b/theme/static/src/scss/index.scss
@@ -51,3 +51,17 @@ p a {
   margin: 10px 0;
   width: 100%;
 }
+
+.portfolio-box {
+  background-color: $brand-grey-dark;
+  max-width: initial;
+  min-height: 300px;
+
+  &.show .portfolio-box-caption {
+    opacity: 1;
+  }
+
+  .portfolio-box-caption {
+    background-color: transparentize($brand-orange, 0.2);
+  }
+}
diff --git a/theme/templates/category.html b/theme/templates/category.html
index 3acc878..bbd76a7 100644
--- a/theme/templates/category.html
+++ b/theme/templates/category.html
@@ -34,7 +34,11 @@
         <div class="row no-gutter">
           {% for article in dates %}
             <div class="col-lg-4 col-sm-6">
-              <a href="#" class="portfolio-box">
+              {% if article.image %}
+                <a href="/{{ article.url }}" class="portfolio-box image" data-image="{{ article.image }}">
+              {% else %}
+                <a href="/{{ article.url }}" class="portfolio-box show" >
+              {% endif %}
                 <div class="portfolio-box-caption">
                   <div class="portfolio-box-caption-content">
                     <div class="project-category">