カードいっぱいにサムネを詰める
https://gyazo.com/098e4b9c239769f5a9769cb658f3b491
タイトル領域は半透明になります
code:style.css
.grid li.page-list-item a .hover {
z-index: 2;
}
.grid li.page-list-item a .header {
position: absolute;
z-index: 1;
padding: 0.5em;
background-color: rgba(255, 255, 255, 0.8); /* テーマに合わせて調整してください */
backdrop-filter: blur(4px);
}
.grid li.page-list-item a .icon {
position: absolute;
width: 100%;
height: 100%;
padding: 10px 0 0; /* カード上部の高さ分 */
}
.grid li.page-list-item a .icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* (optional) カード上部を非表示にする */
.grid li.page-list-item a .header {
border-top: none;
}
.grid li.page-list-item a .icon {
padding: 0;
}
変更履歴
2022-05-02: 関連する UserCSS を別ページに切り分けた カード上部を非表示にする設定は optional としてこの UserCSS に含めた 2022-04-11: タイトル領域の背後をブラーでぼかすようにした
2022-03-10: hover 時にタイトル部分も暗くなるようにした
2022-02-24: 公開
いつかやる
5列にしたときに崩れる問題を修正する