Tailwind CSS 3 Overlay Image Example

In this section we will see tailwind overlay image, tailwind v3 overlay card, header overlay example with Tailwind CSS.


How to install & setup Tailwind CSS v3


Example 1

Simple overlay image on text.

<!DOCTYPE html>
<html lang="en">


  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tailwindcss overlay image</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>


  <body>
    <div class="w-full lg:w-1/3">
      <div
        class='bg-[url("https://cdn.pixabay.com/photo/2018/12/06/16/12/bird-3860034__340.jpg")] object-cover h-96 w-full bg-cover bg-center text-center'>
        <h2 class="text-3xl text-white">This is Overlay Image</h2>
      </div>
    </div>
  </body>
</html>
tailwind css overlay text on image

tailwind css overlay text on image


Example 2

Tailwind v3 overlay card image.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tailwindcss overlay image card</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
      <div class="w-full lg:w-1/3">
          <div class='bg-[url("https://cdn.pixabay.com/photo/2018/12/06/16/12/bird-3860034__340.jpg")] object-cover h-80 w-full bg-cover bg-center p-12'>
              <h2 class="text-2xl text-purple-600">Tailwind CSS Overlay Image Card</h2>
              <p class="mb-8 text-gray-800">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo reiciendis, consectetur ea eveniet quas iste aliquid nulla sed totam non aliquam at sit nesciunt, tempora doloribus eius earum odit doloremque.</p>
              <button class="px-4 py-2 text-purple-100 bg-purple-600 rounded">Read more</button>
          </div>
      </div>
  </body>

</html>
tailwindcss overlay image card

tailwindcss overlay image card


Tailwind v3 header hero section image overlay.

<div
  class='bg-[url("https://cdn.pixabay.com/photo/2018/08/19/07/05/background-3616101__340.jpg")] h-96 w-full object-fill py-32 px-20'>
  <h1 class="text-3xl font-bold text-white">This is image Overlay header</h1>
  <p class="text-lg text-gray-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, minus nihil rem
    incidunt aspernatur eum veniam exercitationem corporis error corrupti. Laudantium harum rerum dignissimos?
    Repudiandae aspernatur nam sit voluptatibus ipsa?</p>
</div>


Read Also

Tailwind CSS 3 FAQ Accordion UI Example

Tailwind CSS 3 Alert Message Example

Tailwind CSS 3 Avatars Example

Tailwind CSS 3 Breadcrumb Example

Tailwind CSS v3 Button Examples

Tailwind CSS v3 Cards Examples

How to use dark mode toggle switch in Tailwind CSS 3

Tailwind CSS 3 Login Page UI Example