Couldn’t add an overlay div to each rendered react components using tailwind

Hi guys I’m using tailwind library for styling and was trying to add an overlay to each components that are rendered using array.map method in react. but the overlay is being overlayed on the outer most div(with id={slider} as u can see on the code below) instead of each components that are being rendered using the map function. Please help a beginner out. Here’s the code

 return (
<>
    <h2 className='text-gray-300 m-4'>{props.title}</h2>
    <div className='relative flex items-center'>
        <div id={'slider'}>
            {movies.map((item, id)  =>


                <div className='w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block'>
                   
                    <img className='w-full h-auto block' src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`} alt={item?.title} />
                    <div className='absolute top-0 left-0 w-full h-full hover:bg-black/80 opacity-0 hover:opacity-100 text-white'> {/* this is the overlay div */}
                    <p className='white-space-normal text-xs md:text-sm font-bold flex justify-center h-full text-center'>{item?.title}</p>
                    </div>
                </div>
                  
            )}

           


        </div>

    </div>

</>

)