overscroll test

by rinkjames

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="./test.css" />
  </head>

  <body>
    <div id="container">
      <div class="img-wrapper" style="left: 820px; top: 80px; width: 470px">
        <img src="https://as2.ftcdn.net/v2/jpg/02/96/95/05/1000_F_296950522_CnIaItWrXyaQEYDuwfQsIc7fr3CngrKj.jpg" />
      </div>
      <div class="img-wrapper" style="left: 1320px; top: 80px; width: 570px">
        <img src="https://as2.ftcdn.net/v2/jpg/02/96/95/05/1000_F_296950522_CnIaItWrXyaQEYDuwfQsIc7fr3CngrKj.jpg" />
      </div>
    </div>
  </body>

</html>

CSS

body {
  background-color: lavender;
  margin: 0;
}

#container {
  background-color: thistle;
  height: 601px;
  margin-top: calc(50vh - 300px);
  position: relative;
  background-size: 20px 20px;
  background-image: linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

.img-wrapper {
  width: 300px;
  position: absolute;
}

.img-wrapper img {
  width: 100%;
}