JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<div id="images-box">
  <div class="holder">
    <div id="image-1" class="image-lightbox">
      <span class="close"><a href="#">X</a></span>
      <img src="https://images.unsplash.com/photo-1478194409487-fa5c1eb18622?dpr=2&auto=format&fit=crop&w=1500&h=970&q=80&cs=tinysrgb&crop=&bg=" alt="earth!">
      <a class="expand" href="#image-1"></a>
    </div>
  </div>
  <div class="holder">
    <div id="image-2" class="image-lightbox">
      <span class="close"><a href="#">X</a></span>
      <img src="https://images.unsplash.com/photo-1477240381028-271008c7415c?dpr=2&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=&bg=" alt="earth!">
      <a class="expand" href="#image-2"></a>
    </div>
  </div>
  <div class="holder">
    <div id="image-3" class="image-lightbox">
      <span class="close"><a href="#">X</a></span>
      <img src="https://images.unsplash.com/photo-1464983953574-0892a716854b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="earth!">
      <a class="expand" href="#image-3"></a>
    </div>
  </div>
</div>

CSS

#images-box {
  /* The total width of the image-box, mainly for centering */
  width: 850px;
  margin: 0px auto;
  position: relative;
  top: 70px;
}

.image-lightbox img {
  /* Inherit the width and height from the parent element */
  width: inherit;
  height: inherit;
}

.holder {
  /* The width and height, you can change these */
  width: 250px;
  height: 166px;
  /* Float left, so everything aligns right */
  float: left;
  margin: 0 20px 0 0;
}

.image-lightbox {
  /* Inherit width and height from the .holder */
  width: inherit;
  height: inherit;
  padding: 10px;
  /* Box shadow */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  background: #fff;
  border-radius: 5px;
  /* Position absolutely so we can zoom it out later */
  position: absolute;
  top: 0;
  font-family: Arial, sans-serif;
  /* Transitions to provide some eye candy */
  -webkit-transition: all ease-in 0.5s;
  -moz-transition: all ease-in 0.5s;
  -ms-transition: all ease-in 0.5s;
  -o-transition: all ease-in 0.5s;
}

.image-lightbox span {
  display: none;
}

.image-lightbox .expand {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.image-lightbox .close {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 20px;
  top: 20px;
}

.image-lightbox .close a {
  height: auto;
  width: auto;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
  background: #22272c;
  box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.4), 0px 0px 30px rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  font-weight: bold;
  float: right;
}

.close a:hover {
  box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0, 0, 0, 0.4), 0px 0px 20px rgba(255, 255, 255, 0.4);
}

div[id^=image]:target {
  width: 450px;
  height: 300px;
  z-index: 5000;
  top: 50px;
  left: 200px;
}

div[id^=image]:target .close {
  display: block;
}

div[id^=image]:target .expand {
  display:...