added zone for image gallery hover; added sentence to feed

This commit is contained in:
2026-04-06 21:13:29 +02:00
parent 5c0f1e338c
commit 0d608a6287
2 changed files with 25 additions and 17 deletions

View File

@@ -31,6 +31,7 @@
} }
</script> </script>
<div class="gallery-zone">
<div class="gallery-container blurred-background"> <div class="gallery-container blurred-background">
<div class="gallery-button-container"> <div class="gallery-button-container">
<button class="gallery-button" onclick={galleryBack}>&lt;</button> <button class="gallery-button" onclick={galleryBack}>&lt;</button>
@@ -49,8 +50,13 @@
<img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}> <img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
</div> </div>
</div> </div>
</div>
<style> <style>
.gallery-zone {
width: 100%;
}
.gallery-container { .gallery-container {
position: relative; position: relative;
max-width: var(--media-width); max-width: var(--media-width);
@@ -79,13 +85,13 @@
transition: opacity var(--duration-animation) var(--anim-curve); transition: opacity var(--duration-animation) var(--anim-curve);
} }
.gallery-container:hover .gallery-button-container, .gallery-zone:hover .gallery-button-container,
.gallery-container:hover .gallery-text-container .gallery-zone:hover .gallery-text-container
{ {
opacity: 100%; opacity: 100%;
} }
.gallery-container:hover .gallery-img { .gallery-zone:hover .gallery-img {
filter: brightness(40%) saturate(60%); filter: brightness(40%) saturate(60%);
} }

View File

@@ -26,6 +26,8 @@
<p>I'll add some more of my past projects, new projects, and an option to filter by project type <i>soon™</i>. Maybe I'll also split the content into pages, if I ever figure out how to do that.</p> <p>I'll add some more of my past projects, new projects, and an option to filter by project type <i>soon™</i>. Maybe I'll also split the content into pages, if I ever figure out how to do that.</p>
<p>I <b>MAY</b> merge this with the <a href="/projects">Projects</a> page, I've not yet decided.</p>
<TableOfContents /> <TableOfContents />
<h2>My First Month Drawing</h2> <h2>My First Month Drawing</h2>