diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index 5cfde91..b246112 100644
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -1,4 +1,4 @@
-<a ontouchstart="this.classList.add('card-link-wrapper-active');" ontouchend="this.classList.remove('card-link-wrapper-active');" href="{{ .Permalink }}" class="card-link-wrapper" rel="bookmark" title="Link to {{ .Title }}" >
+<a ontouchstart="cardPressed()" ontouchend="cardReleased()" href="{{ .Permalink }}" class="card-link-wrapper" rel="bookmark" title="Link to {{ .Title }}" >
     {{ if isset .Params "featuredimage" }}
       <img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img">
     {{ end }}
diff --git a/static/css/style.css b/static/css/style.css
index 67f7236..684fecd 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -67,15 +67,19 @@ img {
     color: rgb(52, 58, 63);
     display: block;
     background-color: white;
-    transition: transform 0.3s;
+    border-radius: 0.5em;
+    transition: transform 0.3s, box-shadow 0.3s;
+    box-shadow: 0 1em 1.6em 0 rgba(0, 0, 0, 0.06);
 }
 .card-link-wrapper-active {
     transform: scale(0.95);
+    box-shadow: 0 0.8em 1.4em 0 rgba(0, 0, 0, 0.08);
 }
 .card {
     padding: 1em;
 }
 .card-img {
+    border-radius: 0.4em 0.4em 0 0;
     margin-bottom: -1.2em;
     max-height: 10em;
     object-fit: cover;