denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added animated effect on hover to Gallery

Browse Source
This commit is contained in:
denizk0461
2026-02-02 20:59:10 +01:00
parent 4d8d10765c
commit 62c99fd5de
2 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/lists/gallery.svelte
View File

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

4
src/routes/+page.svelte
View File

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