Vue js Tailwind card design with image out of the card

Question

I am trying to create a card with an image popping out of the card. I used z index but it is not really working. Here is my code:

 <div class="flex flex-col">
            <div class="shadow-2xl rounded-xl w-96 h-96 pb-8 px-8 relative">
              <div>
                <button class="z-50 mb-10">
                  <img src="../assets/person.svg" alt="" />
                </button>
                <p class="text-center bt-smalltitle font-bold pb-4">
                  Name Surname
                </p>

                <div class="flex items-center justify-center pb-4">
                  <button
                    class="bg-black rounded-2xl text-center text-white bt-book px-2 py-1.5"
                  >
                    40$ Per session
                  </button>
                </div>

                <div class="flex flex-row items-stretch justify-between pb-5">
                  <p>Example</p>

                  <p>Example</p>
                </div>

                <p class="text-center bt-smalltext">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
                  placeat aperiam tempora.
                </p>
              </div>
            </div>
          </div>

Also, I want it to be sticky, so if the size of the card will change the position of the image should change as well.

Here is an example what I am trying to achieve

score 3 · Accepted Answer · answered Aug 17 '22 at 06:55

You have to set the position of your image in relative and subtract the margin bottom from half the height of your div container. Center the whole thing with flexes (using your code, I added in your second div items-center to do this)

<template>
  <div class="py-20">
    <div class="flex flex-col items-center">
      <!-- Image emplacement -->
      <div class="bg-white h-32 w-32 rounded-full relative -mb-16">
        <button class="z-50">
          <img src="../assets/person.svg" alt="" />
        </button>
      </div>
      <!-- Content Card emplacement -->
      <div class="shadow-2xl rounded-xl w-96 h-96 pb-8 px-8 relative pt-24">
        <div>
          <p class="text-center bt-smalltitle font-bold pb-4">Name Surname</p>

          <div class="flex items-center justify-center pb-4">
            <button
              class="bg-black rounded-2xl text-center text-white bt-book px-2 py-1.5"
            >
              40$ Per session
            </button>
          </div>

          <div class="flex flex-row items-stretch justify-between pb-5">
            <p>Example</p>

            <p>Example</p>
          </div>

          <p class="text-center bt-smalltext">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum placeat
            aperiam tempora.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

Vue js Tailwind card design with image out of the card

1 Answers1