Kevin Powell - CommunityKP-C
Kevin Powell - Communityā€¢10mo agoā€¢
43 replies
Patrik

Substract image with css

hello there any ideas how to implement this to css from figma?
im kinda understand how to make top one, but bottm one kinda tricky there's should be a shadow from image, i was thinking about clip-path or mask but im not sure

btw price may have mroe numbers so it should be dynamic, and top one as well

<div class="relative rounded-2xl bg-primary-900 p-4">
   <p class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center z-10">{{ name }}</p>

   <div class="relative aspect-[0.68/1] mt-3 rounded-4xl overflow-hidden">
      <NuxtImg class="size-full object-cover drop-shadow-main" :src="'/fs/' + thumbnail?.path" alt="" />

      <div class="absolute top-0 left-5 px-6 py-3 bg-primary-900 rounded-b-4xl">
         <div class="flex gap-3 items-center">
            <!-- @vue-skip -->
            <p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

            <p>{{ gender }}</p>
         </div>
      </div>

      <div class="absolute bottom-0 right-0 px-6 py-3 bg-primary-900">
         <p>${{ price }}</p>
      </div>
   </div>

   <NuxtLink class="mt-4 block" to="">more information</NuxtLink>
</div>

i've done this so far, thanks for any help!
image.png
Was this page helpful?