parent
86e02968c9
commit
da9ad49f36
@ -1,17 +1,21 @@
|
||||
|
||||
<script>
|
||||
export let href;
|
||||
export let picture;
|
||||
export let picture = null;
|
||||
export let alt;
|
||||
</script>
|
||||
|
||||
|
||||
<a href={href} class="group relative shadow w-full bg-cover text-white rounded-lg hover:-translate-y-1 duration-300 overflow-hidden">
|
||||
<img src={picture} class="bg-black rounded-lg group-hover:bg-gradient-to-b group-hover:from-rose-400 group-hover:to-red-900 duration-300 w-full h-full" alt={alt} />
|
||||
{#if picture}
|
||||
<img src={picture} class="bg-black rounded-lg group-hover:bg-gradient-to-b group-hover:from-rose-400 group-hover:to-red-900 duration-300 w-full h-full" alt={alt} />
|
||||
{:else}
|
||||
<div class="bg-red-400 rounded-lg group-hover:bg-gradient-to-b group-hover:from-rose-400 group-hover:to-red-900 duration-300 w-full h-full min-h-[200px]" alt={alt} />
|
||||
{/if}
|
||||
<div class="absolute inset-0 bg-black bg-opacity-50 group-hover:bg-opacity-20 duration-300 rounded-lg"></div>
|
||||
|
||||
<div class="absolute inset-0 flex justify-center items-center">
|
||||
<h4 class="font-bold italic text-sm lg:text-3xl text-center drop-shadow-xl">
|
||||
<h4 class="font-bold italic text-base lg:text-3xl text-center drop-shadow-xl">
|
||||
<slot />
|
||||
</h4>
|
||||
</div>
|
||||
|
Loading…
Reference in new issue