Edit in JSFiddle

<div id="foto"></div>

#foto {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  background: pink;
  background-image: url('https://woo.thoth.dk/wp-content/uploads/2023/08/beanie-with-logo-1-600x600.jpg');
  background-size: cover;
}
#foto:hover {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  background: blue;
  background-image: url('https://woo.thoth.dk/wp-content/uploads/2023/08/hoodie-with-zipper-2-600x600.jpg');
    background-size: cover;
}