<a href="https://drive.google.com/uc?export=view&id=12-5Pbz-wbUOlMaFVo5lVXOSpRHBy8vvq" class="luminous">
  <img src="https://drive.google.com/uc?export=view&id=12-5Pbz-wbUOlMaFVo5lVXOSpRHBy8vvq" alt="">
</a>
.luminous {
  position: relative;
  display: block;
  width: 300px;
}

.luminous img {
  width: 100%;
}

.luminous::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 2.5em;
  height: 2.5em;
  background-color: rgba(0,0,0,0.2);
  background-image: url("https://drive.google.com/uc?export=view&id=1kddaD-8QDrfgZqx8KQzuXOYK3Cs3w3Gd");
  background-size: 2em 2em;
  background-position: center center;
  background-repeat: no-repeat;
}
new Luminous(document.querySelector('.luminous'));

External CSS

  1. https://cdn.jsdelivr.net/npm/luminous-lightbox@2.4.0/dist/luminous-basic.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/luminous-lightbox@2.4.0/dist/luminous.min.js