Tailwind CSS text over image problems

user_14921682 0
Viewed 11644

I'm trying to code as below https://play.tailwindcss.com/5x8mBABcsW

How I can place the text over the circle image? I need the text centered and rounded on the bottom of the image.

I also want to be able to increase size of the image and everything should stay in proportion.

tailwind-css css html
2 Answers

Something like this

<div class="relative w-40 h-40 rounded-full overflow-hidden">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="object-cover w-full h-full" />
  <div class="absolute w-full py-2.5 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4">this is a text</div>
</div>

Height of bottom element is set by paddings (but you can change it with height), image size handled by parent's w-40 h-40 - you may change them.

user_143050760 

<div class="relative w-40 h-40 overflow-hidden rounded-full">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="rounded-full w-full h-full" />
    <div 
    class="absolute w-full py-3 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4 hover:translate-y-1 delay-500">this is a text</div>
  </div>

OR-

<div class="relative w-40 h-40">
        <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="rounded-full w-full h-full" />
        <div class="absolute w-full h-full top-0 left-0 rounded-full bg-blue-400 text-white text-xs flex justify-center items-center opacity-0 hover:opacity-90">this is a text</div>
      </div>

I think you will try with this code- Also, you will change or adjust values-

user_168458280
Related