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

30
src/lib/banner2.svelte
View File

@@ -24,7 +24,7 @@
</script> </script>
{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})} {#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
<h1 class="title">{title}</h1> <h1 class="title">{title}</h1>
<div class="title-container"> <div class="title-container">
<div class="title-text-container"> <div class="title-text-container">
{#if subtitle} {#if subtitle}
@@ -56,11 +56,13 @@
<div class="container"> <div class="container">
{#if banner && banner !== ""} {#if banner && banner !== ""}
{#if pixelated} <div class="banner-container">
<img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}"> {#if pixelated}
{:else} <img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
<img class="banner" src="{banner}" alt="{bannerAlt}"> {:else}
{/if} <img class="banner" src="{banner}" alt="{bannerAlt}">
{/if}
</div>
{/if} {/if}
{@render titles({title, subtitle, date})} {@render titles({title, subtitle, date})}
<hr> <hr>
@@ -71,12 +73,24 @@
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 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -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;
} }