.cardoverlay{
display:none;
}
.cardoverlay:hover {
opacity:0.5!important;
position:absolute!important;
display:block!important;
}
<img src={thumbnail} alt={i.title} className="card-img card-img-top"
style={{width:"300px",position:"relative",height:"260px",top:"0",left:"0",
"object-fit":"cover"}}/>
<img src={getOverlayImage(LOCAL_URL_PREFIX,i.type)} className="cardoverlay" style={{width:"300px",height:"260px",top:"0",left:"0",
position:"relative",opacity:"0.5",}}/>
ASKER
HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.
TRUSTED BY
Open in new window
Now the cardoverlay will show up when you hover over the div