fix:优化图书封面效果

layouts/index.html

@@ -5,8 +5,7 @@
     <!-- {{- partial "custom-message.html" . -}}-->
 
     <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
-      {{ range where .Site.Pages "Kind" "page" }}
-      {{ if ne .Params.Exclude true }}
+      {{ range where .Site.Pages "Kind" "page" }} {{ if ne .Params.Exclude true }}
       <a
         target="_blank"
         rel="noopener"
@@ -15,30 +14,22 @@
       >
         <div class="rounded-lg h-64 overflow-hidden card-item relative">
           {{ if (or .Params.Image .CurrentSection.Params.Image) }}
-          <img
-            alt="{{ .Title }}"
-            class="object-cover object-center h-full w-full"
-            src="{{ (or .Params.Image .CurrentSection.Params.Image) }}"
-          />
+          <img alt="{{ .Title }}" class="object-cover object-center h-full w-full" src="{{ (or .Params.Image .CurrentSection.Params.Image) }}" />
           {{ end }}
-          <span
-            class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl"
-            >{{ title .Section }}</span
-          >
+          <div class="card-content">
+            <span class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">{{ title .Section }}</span>
             <h2
               class="h2 text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
             >
               {{ .Title }}
             </h2>
-          <p
-            class="h3 text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"
-          >
+            <p class="h3 text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0">
               {{ .Params.Subtitle }}
             </p>
           </div>
+        </div>
       </a>
-      {{ end }}
-      {{ end }}
+      {{ end }} {{ end }}
     </div>
   </div>
 </section>

static/css/index.css

+.card-item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background: rgba(0, 0, 0, 0.4);
+}
+.card-item .card-content {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 9;
+  top: 0;
+  left: 0;
+}
 .card-item .object-cover {
-  filter: brightness(0.6) blur(1px);
+  filter: blur(1px);
   transition: all 0.2s;
 }
 .card-item:hover .object-cover {
   transform: scale(1.02);
-  filter: brightness(0.6) blur(0);
+  filter: blur(0);
 }