普段は1行分のタイトルだけ見せて、hover すると全部見えるようにする UserCSS

右下のカードに hover している。

code:style.css

/* hover div を消す */

.grid li.page-list-item a .hover {

display: none

}

.grid li.page-list-item a .title {

line-height: 1.2;

max-height: calc(1.2em * 1); /* 1行分 */

overflow: hidden;

text-overflow: clip;

white-space: nowrap;

-webkit-mask-image: linear-gradient(to right, black 80%, transparent);

mask-image: linear-gradient(to right, black 80%, transparent);

}

.grid li.page-list-item a .header:hover .title,

.grid li.page-list-item a .header:focus .title,

.grid li.page-list-item a .header:focus-within .title,

.grid li.page-list-item a .header:active .title {

max-height: 100%;

white-space: normal;

mask-image: unset;

}