how to darken the image on hover in tailwind - hover

Question

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>

Answer 1

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

Answer 2

There are several options for you to accomplish what you want.
Using:
filter
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