<script>
export let description = '';
export let imgSrc = '';
export let title = '';
</script>
<div
class="bg-slate-50 bg-cover w-72 h-auto flex flex-col items-center p-8 rounded-lg shadow-lg group cursor-pointer"
>
<div
class="bg-cover aspect-square w-full -mt-24 bg-center rounded-lg shadow-sm grayscale group-hover:grayscale-0 transition-all duration-500 z-20"
style:background-image="url({imgSrc}) "
/>
<div
id="content-wrapper"
class="flex flex-col opacity-0 group-hover:opacity-100 invisible group-hover:visible h-0 group-hover:h-full delay-200 z-10"
>
<div
id="content"
class="flex flex-col items-center -mt-28 group-hover:mt-2 transition-all duration-300 delay-600"
>
<h2 class="font-bold font-serif text-2xl tracking-wide text-slate-900 text-center">
{title}
</h2>
<p class="text-center font-sans font-light text-slate-700">
{@html description}
</p>
</div>
</div>
</div>
<script>
import Owl from './components/Owl.svelte';
</script>
<div
class="grid gap-24 items-center justify-center from-slate-700 to-slate-900 bg-gradient-to-br h-screen w-screen"
>
<Owl
title="Art"
description="<b class='text-sm'>Fantastic Art</b>"
imgSrc="https://picsum.photos/200/300"
/>
<Owl
title="Hightlight"
description="<b class='text-sm'>Product Hightlight</b>"
imgSrc="https://picsum.photos/200/301"
/>
</div>
Ähnliche Beiträge
Du muss angemeldet sein, um einen Kommentar zu veröffentlichen.