Tailwind CSS: How to Create a Black-and-White Image

Updated: June 9, 2022 By: Pennywise Post a comment

In Tailwind CSS, you can create a black-and-white image from a full-color image by adding the grayscale utility class to its parent (a <div> element is nice). To remove this effect dynamically (hover, active, etc), use the grayscale-0 utility.

Example

Screenshot:

The flower image is from Pixabay, used under Pixabay’s license

On the left side is the original image and on the right side is the black-and-white image. When you hover over the right one, it will return to full color.

The code:

<body class="p-20 flex space-x-10 bg-yellow-100">
    <div>
        <img class="w-[400px] object-cover" 
          src="https://www.kindacode.com/wp-content/uploads/2022/06/flower.jpeg" />
    </div>

    <div class="grayscale hover:grayscale-0">
        <img class="w-[400px] object-cover"
           src="https://www.kindacode.com/wp-content/uploads/2022/06/flower.jpeg" />
    </div>
</body>

That’s if. Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles