<!DOCTYPE html>
<body>
  <div id="sq-1"></div>
  <div id="sq-2"></div>
  <div id="sq-3"></div>
  <div id="sq-4"></div>
  <div id="sq-5"></div>
  <div id="sq-6"></div>
  <div id="sq-7"></div>
  <div id="sq-8"></div>
</body>
<style>
  div{
    width: 50px;
    height: 50px;
    position: absolute;
  }
  #sq-1{
    background-color: teal;
    left:  18px;
    top:  18px;
    opacity: 0.75;
  }
  #sq-2{
    background-color: magenta;
    left:  78px;
    top:  18px;
    opacity: 0.5;
  }
  #sq-3{
    background-color: orange;
    left:  18px;
    top:  78px;
    opacity: 0.25;
  }
  #sq-4{
    background-color: chocolate;
    left:  78px;
    top:  78px;
    opacity: 0;
  }
  #sq-5{
    background-color: cyan;
    left:  18px;
    top:  158px;
    opacity: 0.8;
  }
  #sq-6{
    background-color: red;
    left:  28px;
    top:  158px;
    opacity: 0.6;
  }
  #sq-7{
    background-color: yellow;
    left:  38px;
    top:  158px;
    opacity: 0.4;
  }
  #sq-8{
    background-color: green;
    left:  48px;
    top:  158px;
    opacity: 0.2;
  }
</style>
