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

banner now zooms in on hover

Browse Source
This commit is contained in:
denizk0461
2026-04-08 21:38:13 +02:00
parent a59179505a
commit a774173f0b
1 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/banner2.svelte
View File

@@ -56,11 +56,13 @@
<div class="container"> <div class="container">
{#if banner && banner !== ""} {#if banner && banner !== ""}
<div class="banner-container">
{#if pixelated} {#if pixelated}
<img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}"> <img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
{:else} {:else}
<img class="banner" src="{banner}" alt="{bannerAlt}"> <img class="banner" src="{banner}" alt="{bannerAlt}">
{/if} {/if}
</div>
{/if} {/if}
{@render titles({title, subtitle, date})} {@render titles({title, subtitle, date})}
<hr> <hr>
@@ -71,10 +73,22 @@
width: 100%; width: 100%;
} }
.banner { .banner-container {
max-height: 300px; max-height: 300px;
height: 300px;
width: 100%; width: 100%;
overflow: hidden;
}
.banner {
width: 100%;
height: 100%;
object-fit: cover; object-fit: cover;
transition: scale var(--duration-animation) var(--anim-curve);
}
.banner-container:hover .banner {
scale: 1.04;
} }
.title-container { .title-container {
@@ -149,7 +163,7 @@
line-height: 1.2rem; line-height: 1.2rem;
} }
.banner { .banner-container {
height: 180px; height: 180px;
max-height: 180px; max-height: 180px;
} }