diff --git a/layouts/index.html b/layouts/index.html
index c46f68872fe6158e615a4d1c0e061f39b083222d..0b97f3507da8d3beb4080700eb42bcfc843707ff 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -13,7 +13,7 @@
         href="{{ .Params.Link }}"
         class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}"
       >
-        <div class="rounded-lg h-64 overflow-hidden relative">
+        <div class="rounded-lg h-64 overflow-hidden card-item relative">
           {{ if (or .Params.Image .CurrentSection.Params.Image) }}
           <img
             alt="{{ .Title }}"
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index c1152e539d69ba12797897f4b71a705b83288305..0f7c6bd0e23cd03aff79f6191ec829d473807b01 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -15,6 +15,11 @@
     href="css/tailwind.min.css"
     rel="stylesheet"
   />
+  <link
+    type="text/css"
+    href="css/index.css"
+    rel="stylesheet"
+  />
   <style>
     @font-face {
       font-family: "Bree Serif";
diff --git a/static/css/index.css b/static/css/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..de52d3ede51f007e2f25552c8ae92c1ca7af1408
--- /dev/null
+++ b/static/css/index.css
@@ -0,0 +1,8 @@
+.card-item .object-cover {
+  filter: brightness(0.6) blur(1px);
+  transition: all 0.2s;
+}
+.card-item:hover .object-cover {
+  transform: scale(1.02);
+  filter: brightness(0.6);
+}