Upload Background Image with title fade in

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Upload Background Image</h1>
    <p>Avoid using images that contain text, as these can cause the title to become difficult to read.</p>
    myImage.jpg <button onclick="upload()">Upload</button>
    
    <div id="preview" style="margin-top: 20px">
      <hr/>
      <h3>Preview</h3>
      <div class="preview-image">
        <img src="https://placehold.it/350X250">
        <span class="preview-title">Example Title</span>
      </div>
    </div>
  </body>

</html>

// Code goes here

function upload() {
  const element = document.getElementById('preview');
  if (!element.classList.contains('show'))
    element.classList.add('show');
}

/* Used only for "simulating" uploading of an image */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#preview {
  display: none;
}

#preview.show {
  display: block;
}

.preview-image {
  position: relative;
  display: inline-block;
}

.preview-title {
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  width: 100%;
  transform: translateY(-50%);
  top: 50%;
  text-align: center;
}

.show .preview-title {
  animation: fadein 2s ease-in-out;
}

@keyframes fadein {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}