Мини галерея на сайте

div,
label {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-size: 1vmin;
  margin: 0;
  padding: 0;
  background: mistyrose;
}

.items {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80em;
  height: 80em;
}

.items [class*='item'] {
  width: 33%;
  height: 33%;
  border: 1px solid transparent;
  background: url() center center/cover no-repeat;
  transition: all 0.5s ease-in-out;
  z-index: 0;
}

.items [class*='item']:hover {
  border: 1px solid white;
  z-index: 1;
}

.items [class*='item']:nth-of-type(1) {
  top: 0;
  left: 0;
}

.items [class*='item']:nth-of-type(2) {
  top: 0;
  left: 33%;
}

.items [class*='item']:nth-of-type(3) {
  top: 0;
  left: 66%;
}

.items [class*='item']:nth-of-type(4) {
  top: 33%;
  left: 0;
}

.items [class*='item']:nth-of-type(5) {
  top: 33%;
  left: 33%;
}

.items [class*='item']:nth-of-type(6) {
  top: 33%;
  left: 66%;
}

.items [class*='item']:nth-of-type(7) {
  top: 66%;
  left: 0;
}

.items [class*='item']:nth-of-type(8) {
  top: 66%;
  left: 33%;
}

.items [class*='item']:nth-of-type(9) {
  top: 66%;
  left: 66%;
}

.items input {
  display: none;
}

.items input:checked+[class*='item'] {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

<div class="container">
  <div class="items">
    <input id="item1" type="checkbox" />
    <label class="item1" for="item1" style="background-image:url(https://e-maxo.com/wp-content/uploads/2019/03/1529602995_12.jpg);"></label>
    <input id="item2" type="checkbox" />
    <label class="item2" for="item2" style="background-image:url(https://e-maxo.com/wp-content/uploads/2019/03/1533840174_37.jpg);"></label>
    <input id="item3" type="checkbox" />
    <label class="item3" for="item3" style="background-image:url(https://e-maxo.com/wp-content/uploads/2019/03/2672907990-1.jpg);"></label>
    <input id="item4" type="checkbox" />
    <label class="item4" for="item4" style="background-image:url(https://e-maxo.com/wp-content/uploads/2019/03/223-1024x1024.jpg);"></label>
    <input id="item5" type="checkbox" />
    <label class="item5" for="item5" style="background-image:url(https://e-maxo.com/wp-content/uploads/2019/03/1529068738_56.jpg);"></label>
    <input id="item6" type="checkbox" />
    <label class="item6" for="item6" style="background-image:url(https://e-maxo.com/wp-content/uploads/2019/03/s1200-35.jpg);"></label>
    <input id="item7" type="checkbox" />
    <label class="item7" for="item7" style="background-image:url(https://e-maxo.com/wp-content/uploads/2019/03/1513023112_13.jpg);"></label>
    <input id="item8" type="checkbox" />
    <label class="item8" for="item8" style="background-image:url(https://e-maxo.com/wp-content/uploads/2019/03/40265003_233647793986791_4085015935438304779_n.jpg);"></label>
    <input id="item9" type="checkbox" />
    <label class="item9" for="item9" style="background-image:url(https://e-maxo.com/wp-content/uploads/2019/03/1529603191_105.jpg);"></label>
  </div>
</div>