z-index: 1 の内包エレメント(初期表示)

<div style="position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
  <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
    <div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;">
      <div style="width: 256px; height: 256px; position: absolute; left: -46px; top: -14px;"></div>
      <div style="width: 256px; height: 256px; position: absolute; left: -46px; top: 242px;"></div>
      <div style="width: 256px; height: 256px; position: absolute; left: 210px; top: -14px;"></div>
      <div style="width: 256px; height: 256px; position: absolute; left: 210px; top: 242px;"></div>
    </div>
  </div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;">
  <div style="position: absolute; left: 0px; top: 0px; z-index: -1;">
    <div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;">
      <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -46px; top: -14px;"></div>
      <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -46px; top: 242px;"></div>
      <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 210px; top: -14px;"></div>
      <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 210px; top: 242px;"></div>
    </div>
  </div>
</div>
<div style="position: absolute; z-index: 0; left: 0px; top: 0px;">
  <div style="overflow: hidden; width: 400px; height: 400px;">
    <img src="https://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i14898990&2i6607630&2e1&3u16&4m2&1u400&2u400&5m5&1e0&5sen-US&6sus&10b1&12b1&token=25276" style="width: 400px; height: 400px;">
  </div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
  <div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;">
    <div style="position: absolute; left: -46px; top: 242px; transition: opacity 200ms ease-out 0s;">
      <img alt="" draggable="false" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i58199!3i25812!4i256!2m3!1e0!2sm!3i373056538!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=130111" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; max-width: none;">
    </div>
    <div style="position: absolute; left: 210px; top: 242px; transition: opacity 200ms ease-out 0s;">
      <img alt="" draggable="false" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i58200!3i25812!4i256!2m3!1e0!2sm!3i373056538!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=117450" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; max-width: none;">
    </div>
    <div style="position: absolute; left: -46px; top: -14px; transition: opacity 200ms ease-out 0s;">
      <img alt="" draggable="false" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i58199!3i25811!4i256!2m3!1e0!2sm!3i373056562!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=35050" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; max-width: none;">
    </div>
    <div style="position: absolute; left: 210px; top: -14px; transition: opacity 200ms ease-out 0s;">
      <img alt="" draggable="false" src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i58200!3i25811!4i256!2m3!1e0!2sm!3i373056562!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=22389" style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; max-width: none;">
    </div>
  </div>
</div>