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

added zone for image gallery hover; added sentence to feed

Browse Source
This commit is contained in:
denizk0461
2026-04-06 21:13:29 +02:00
parent 5c0f1e338c
commit 0d608a6287
2 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/lists/image-gallery.svelte
View File

@@ -31,26 +31,32 @@
}
</script>
<div class="gallery-container blurred-background">
<div class="gallery-button-container">
<button class="gallery-button" onclick={galleryBack}>&lt;</button>
<div class="gallery-text-container">
<p class="gallery-index">{currentIndex + 1} / {images.length}</p>
<div class="gallery-desc-container">
<p>&nbsp;</p> <!-- this element intentionally left blank -->
{#each images[currentIndex].desc as d}
<p>{@html d}</p>
{/each}
<div class="gallery-zone">
<div class="gallery-container blurred-background">
<div class="gallery-button-container">
<button class="gallery-button" onclick={galleryBack}>&lt;</button>
<div class="gallery-text-container">
<p class="gallery-index">{currentIndex + 1} / {images.length}</p>
<div class="gallery-desc-container">
<p>&nbsp;</p> <!-- this element intentionally left blank -->
{#each images[currentIndex].desc as d}
<p>{@html d}</p>
{/each}
</div>
</div>
<button class="gallery-button" onclick={galleryForward}>&gt;</button>
</div>
<div class="gallery-img-container">
<img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
</div>
<button class="gallery-button" onclick={galleryForward}>&gt;</button>
</div>
<div class="gallery-img-container">
<img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
</div>
</div>
<style>
.gallery-zone {
width: 100%;
}
.gallery-container {
position: relative;
max-width: var(--media-width);
@@ -79,13 +85,13 @@
transition: opacity var(--duration-animation) var(--anim-curve);
}
.gallery-container:hover .gallery-button-container,
.gallery-container:hover .gallery-text-container
.gallery-zone:hover .gallery-button-container,
.gallery-zone:hover .gallery-text-container
{
opacity: 100%;
}
.gallery-container:hover .gallery-img {
.gallery-zone:hover .gallery-img {
filter: brightness(40%) saturate(60%);
}