Add link to Poster component and make a better hover

Buttons are now under the image, creating a parallax scale effect
This commit is contained in:
2021-11-05 12:57:15 +01:00
parent b8d1d6334c
commit 2e05f00b68
2 changed files with 30 additions and 22 deletions

View File

@@ -8,6 +8,7 @@
<div class="poster"> <div class="poster">
{#if image} {#if image}
<a href="/shop/poster-{location.slug}">
<Image <Image
id={image.id} id={image.id}
sizeKey="product" sizeKey="product"
@@ -19,6 +20,7 @@
ratio={1.5} ratio={1.5}
alt="Poster of {location.name}" alt="Poster of {location.name}"
/> />
</a>
{/if} {/if}
<div class="buttons"> <div class="buttons">
<Button <Button

View File

@@ -9,7 +9,16 @@
max-width: 600px; max-width: 600px;
} }
& > a {
display: block;
pointer-events: none;
}
// Poster image
img { img {
pointer-events: auto;
position: relative;
z-index: 2;
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
@@ -21,26 +30,26 @@
transition: transform 0.8s var(--ease-quart), border-radius 0.8s var(--ease-quart); transition: transform 0.8s var(--ease-quart), border-radius 0.8s var(--ease-quart);
} }
// Buttons
.buttons { .buttons {
display: flex; display: flex;
margin-top: 40px; margin-top: 40px;
justify-content: center; justify-content: center;
// opacity: 0; transform: translate3d(0, 100%, 0);
transform: translate3d(0, 48px, 0); transition: transform 0.8s var(--ease-quart);
transition: transform 0.8s var(--ease-quart), opacity 0.4s var(--ease-quart);
@include bp (sm) { @include bp (sm) {
position: absolute; position: absolute;
z-index: 1;
bottom: 4.25%;
left: 0;
width: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
bottom: 14px;
left: 10%;
right: 10%;
} }
a { a {
margin-right: 8px; margin: 0 clamp(4px, 0.3vw, 8px);
margin-left: 8px;
text-align: center; text-align: center;
} }
} }
@@ -52,10 +61,7 @@
border-radius: 8px; border-radius: 8px;
} }
.buttons { .buttons {
opacity: 1;
transform: translate3d(0,0,0); transform: translate3d(0,0,0);
// transition-delay: 50ms;
} }
} }
} }