Is there a way to have a clear image and text on top of a blurred bg-image within a div via Tailwind CSS?

Question

I have been working on this issue for like 4 hours now and I am coming up with nothing.

I want to be able to make a card element for my website, I want the background to be blurred but i want an image on top of that blurred image and text.

I am using tailwind and so far my attempts have blurred everything.

Here is my attempt https://play.tailwindcss.com/PK2FXaIYx4?size=564x720

Does this answer your question? [How to blur(css) div without blur child element](https://stackoverflow.com/questions/28975673/how-to-blurcss-div-without-blur-child-element) — Jake White, Mar 28 '21 at 19:30

score 1 · Answer 1 · answered Mar 29 '21 at 03:13

You will need to play around with position: relative and absolute. Also need filter: blue(px) on style attribute.

See a working example https://play.tailwindcss.com/qMDnmBi9Lo

<div class="w-80 h-96 relative">
  <div class="absolute inset-0 z-0">
    <img src="https://static.wikia.nocookie.net/jumanji/images/1/1b/Jumanji_2017_Poster.jpg/revision/latest/scale-to-width-down/1000?cb=20181023182751" alt="" srcset="" style="filter: blur(4px)" />
  </div>

  <div class="absolute inset-0 z-10">
    <div class="flex flex-col transform scale-75 space-y-4">
      <img src="https://static.wikia.nocookie.net/jumanji/images/1/1b/Jumanji_2017_Poster.jpg/revision/latest/scale-to-width-down/1000?cb=20181023182751" alt="" srcset="" />
      <div class="text-white text-2xl text-center">Jumanji</div>
    </div>
  </div>
</div>

Thanks! this is exactly what i needed. The Z-index was what was missing thanks! — Nathan E, Mar 29 '21 at 08:20

Is there a way to have a clear image and text on top of a blurred bg-image within a div via Tailwind CSS?

1 Answers1