How can I implement css hover effect in react inline-styling?

Question

I am trying to implement a hover effect in the react component using react inline-styling.

const InfoWindow: React.FC<IInfoWindowProps> = ({ room }) => {

  const info_window_image = {
    width: "100%",
    height: "168px",
    background: `url(${room.pictures[0].image.large}) no-repeat`,
    backgroundSize: "contain",
    cursor: 'pointer'
  };

  return (
    <div className="info_window_container">
      <div style={info_window_image} />
    </div>
  )
};

div tag under info_window_container gets style object info_window_image .

I can successfully receive an image from API but I want to give zoom-in animation when the user hovers the image in the component.

I gave className to the div and styled in CSS file however it does not work. Styles I declared in CSS file do not render.

How can I make hover or focus effect in react-inline-styling?