added animated effect on hover to Gallery

This commit is contained in:
2026-02-02 20:59:10 +01:00
parent 4d8d10765c
commit 62c99fd5de
2 changed files with 13 additions and 4 deletions

View File

@@ -70,8 +70,8 @@
height: 100%; height: 100%;
margin: 0; margin: 0;
object-fit: cover; object-fit: cover;
filter: grayscale(60%); /* filter: grayscale(60%); */
transition: filter 0.1s ease-out; transition: margin 0.1s ease-out;
} }
.gallery-img-placeholder { .gallery-img-placeholder {
@@ -84,12 +84,13 @@
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
padding-left: 16px; padding-left: 16px;
padding-right: 16px;
border-style: dashed; border-style: dashed;
justify-content: center; justify-content: center;
border-color: transparent; border-color: transparent;
border-width: 2px; border-width: 2px;
border-left: none; border-left: none;
transition: border-color 0.1s ease-out; transition: border-color 0.1s ease-out, padding-right 0.1s ease-out;
} }
.gallery-title, .gallery-subtitle { .gallery-title, .gallery-subtitle {
@@ -111,7 +112,11 @@
border-color: var(--color-highlight); border-color: var(--color-highlight);
} }
.gallery-container:hover .gallery-img, .gallery-container:hover .gallery-img-placeholder { .gallery-container:hover .gallery-img, .gallery-container:hover .gallery-img-placeholder {
filter: grayscale(0%); /* filter: grayscale(0%); */
margin-left: 8px;
}
.gallery-container:hover .gallery-text-container {
padding-right: 8px;
} }
.gallery-container:hover p { .gallery-container:hover p {
color: var(--color-highlight); color: var(--color-highlight);

View File

@@ -130,6 +130,10 @@
line-height: 1rem; line-height: 1rem;
} }
.changelog-entry-link:hover {
font-weight: 700;
}
.webring-container { .webring-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;