<div class="hover-me"></div>

body {

  margin: 20px auto;

  font-family: "Lato";

  font-weight: 300;

}

​

div.hover-me {

  width: 640px;

  height: 360px;

  background: url("https://picsum.photos/id/128/1920/1080");

  background-size: contain;

  cursor: pointer;

  margin: 0 auto;

  position: relative;

}

​

div.hover-me::before {

  content: "Lake";

  background: black;

  color: white;

  position: absolute;

  top: 0.75rem;

  left: 1rem;

  padding: 0.5rem;

  font-size: 1.5rem;

  border-radius: 5px;

}

​

div.hover-me:hover {

  background: url("https://picsum.photos/id/296/1920/1080");

  background-size: contain;

}

​

div.hover-me:hover::before {

  content: "Mountains";

}

​

function preload_image(im_url) {

  let img = new Image();

  img.src = im_url;

}

​

preload_image("https://picsum.photos/id/296/1920/1080");

​