How to use overlay effect in ReactJS? - css

Question

How to use Image overlay in ReactJS? I am making a movie site.
Here is the link : Project
I want to use overlay effect when the user hovers over the image.
When the user hovers over the image I want to show tagline with the overlay effect on the image.
Here is the link I tried : reference
But, it's not working in React.
Here is the code :
In image tag i want to add overlay effect.
<div className="main-description" >
<img src={"https://image.tmdb.org/t/p/w500"+res.poster_path}
className="result- image"/>
<b className="result-titles" >{res.original_title}</b>
<div className="extra-description">
<div className="rating_time_score_container">
<div className="sub-title Rating-data"><b>
Imdb
<span className="details" > {res.vote_average}/10 </span></b></div>
<div className="time-data">
<b><span className="time">
<i className="fa fa-clock-o"></i> </span> <span className="details">
{res.time_str}</span>
</b>
</div>
</div>
</div>

Answer 1

I don't think this has to do with CSS, It would of been nice to have a link to your github but i\I tracked down your code (since its open source) and I took and look. I suggest using a package like this one: https://github.com/ethanselzer/react-hover-observer
or even bootstraps classic react package like this one:
https://react-bootstrap.github.io/components/overlays/
Then what you can do is update the state of your application and add the overlay that way. Hope that helped and good luck with your project