Regarding applying animation to an image using dynamic CSS styles in React - css

Question

I'm new to React. I have this image ("c-tile-img") inside a div ("c-tile-holder") and what I want to do is when I hover over the div or the image element I want to translate on Y-axis slightly like a hover effect. I used React useState hook to achieve this but when I run it nothing is triggered. Here is what I've so far...
**
Tile.jsx
**
const Tile = () => {
const[isMousedOver, setMouseOver] = useState(false);
function handleMouseOver() {
setMouseOver(true);
}
function handleMouseOut() {
setMouseOver(false);
}
return (
<React.Fragment>
<div className="c-tiles">
<a href="/work/help-scout/" className="c-tile c-tile-hs" aria-label="Help Scout Case Study"
style={{translate: isMousedOver ? '50': '0'}}
onMouseOut={handleMouseOut}
onMouseOver={handleMouseOver}>
<span className="c-tile-category">Mobile</span>
<h2 className="c-tile-title">Help Scout</h2>
<div className="c-tile-holder">
<img className="c-tile-img c-tile-img-hs lazy loaded" alt="Help Scout" aria-label="Help Scout image" data-ll-status="loaded"
src={headshot}/>
</div>
</a>
My CSS File
Tile.css
.c-tile-holder {
position: relative;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.c-tile-img-hs {
max-width: 80%;
}
.c-tile-img {
position: relative;
transition: all .4s ease-in-out;
max-width: 100%;
display: inline-block;
}
img {
vertical-align: middle;
}
img {
border-style: none;
}