提交 06c7c78d 编写于 作者: 郭维嘉

fix:优化图书封面效果

上级 be01a32b
......@@ -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>
......
.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);
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册