how to darken the image on hover in tailwind

user_16814913 0
Viewed 3991

I am new to tailwind and I am trying to make the image darker on hover. Here is my config.js

theme: {
extend:{
backgroundImage: (theme) => ({
        video: "url('./bg-img.jpg')",
})
}
},

variants: {
boxShadow:["responsive", "hover", "focus"]
}

and here is my code:

<div className=" h-80 my-4 w-64 rounded-md p-4 bg-video bg-cover bg-center shadow-lg cursor-pointer group hover:bg-black transition-all duration-1000">
<h1 className="uppercase text-2xl text-golden font-black group-hover:text-secondary transition-all duration-500">
 video
</h1>
</div>
tailwind-css hover background-image
2 Answers

You could try putting a div inside and then use the background opacity when hovering it.

Your HTML will be something like this

<div class="h-80 my-4 w-64 rounded-md bg-video bg-cover bg-center shadow-lg cursor-pointer">
  <div class="bg-black bg-opacity-0 p-4 w-full h-full hover:bg-opacity-50 transition-all duration-1000">
    <h1 class="uppercase text-2xl text-golden font-black group-hover:text-secondary transition-all duration-500">video</h1>
  </div>
</div>

And the Tailwind config file

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        video: "url('./bg-img.jpg')",      },
    },
  },
  variants: {
    extend: {
      backgroundImage: ['hover'],
    }
  },
}

You can check the demo here: https://play.tailwindcss.com/hfCerQQvHQ

user_20929690

There are several options for you to accomplish what you want. Using:

  1. filter
  2. backdrop-filter.

I'm sharing with you the filter example.

<div class="min-h-screen flex items-center justify-center bg-royalblue">
  <div class="filter hover:grayscale hover:contrast-200">
    <img src="https://loremflickr.com/cache/resized/65535_51423949778_4bccb1beec_c_500_500_nofilter.jpg" alt="">
  </div>
</div>

https://codepen.io/victoryoalli/pen/mdBVjbb

user_8830690
Related