35 lines
934 B
Svelte
35 lines
934 B
Svelte
<script>
|
|
import CardBodyImg from "./lifemap_body_card.svelte";
|
|
import lifemap_mockup from "$lib/img/lifemap_mockup.png";
|
|
import { base } from '$app/paths';
|
|
</script>
|
|
|
|
<a href="{base}/nexo_project" >
|
|
<div class="rounded-3xl shadow-3xl relative overflow-hidden group card">
|
|
<img
|
|
src={lifemap_mockup}
|
|
placeholder="blur"
|
|
alt="lifemap_mockup"
|
|
class="w-[25rem] object-cover object-center m-0"
|
|
/>
|
|
<div
|
|
class="absolute inset-0 from-stone-900/90 via-stone-900/60 to-stone-900/5 bg-gradient-to-t backdrop-blur-[2px] transition-all duration-300"
|
|
></div>
|
|
<slot>
|
|
<CardBodyImg
|
|
class="absolute pb-0.5 px-4 md:pb-10 inset-x-0 bottom-2 flex flex-col justify-end size-full"
|
|
/>
|
|
</slot>
|
|
</div>
|
|
</a>
|
|
|
|
<style>
|
|
.card {
|
|
transition: all 0.3s;
|
|
filter: grayscale(100%);
|
|
}
|
|
.card:hover {
|
|
transform: scale(1.05);
|
|
filter: grayscale(0%);
|
|
}
|
|
</style> |