My current challenge involves applying an on-hover overlay to the <img />
element in this manner:
const [hover, setHover] = useState(false);
<img
src={image}
alt={alt}
loading="lazy"
onMouseOver={() => { setHover(true) }}
onMouseOut={() => { setHover(false) }}
style={{ zIndex: hover && 1,
transform: hover && 'scale(1.2, 1.2)',
boxShadow: hover && '20px 20px 15px -4px #000000',
backgroundColor: hover && 'red',
transition: hover ? '0.5s' : '0.5s' }} />
I have come across an issue where the backgroundColor
property gets covered by the img
itself. Is there a way to achieve an overlay on the <img />
while using inline styling for background color or other styling properties? Most tutorials I find use CSS for this purpose. Any help is greatly appreciated.