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

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;
  }