Color tinting - wrapper solution

App.css

.box {
  width: 300px;
  height: 250px;

  background-color: cornflowerblue;
  transition: 0.5s background-color;

  background-size: cover;
  background-position: center;
}

.box:hover {
  background-color: transparent;
}

.box > img {
  object-fit: cover;
  height: 100%;
  width: 100%;

  mix-blend-mode: luminosity;
}

App.jsx

import "./App.css";
import React from "react";
import image from "./philip-myrtorp-WqD_gO_xFgg-unsplash.jpg";

function App() {
  return (
    <div className="box">
      <img src={image} />
    </div>
  );
}

export default App;