Cacher is the code snippet organizer for pro developers

--------------html----------------
<div class="hidden-elements">
  <div class="portfolio-5" id="portfolio-5">
    <div class="portfolio-5__cover">
      <div class="portfolio-5__inside">
        <a href="#close" class="portfolio-5__close-window"><i class="fa fa-times" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>
</div>
--------------css-----------------
#portfolio-5 {
  position: absolute;
  background-color: rgba(0,0,0,.5);
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: .5s ease all;
}

#portfolio-5:target {
  pointer-events: auto;
  opacity: 1;
  transition: .5s ease all;
  visibility: visible;
}

.portfolio-5__cover {
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  height: 300px;
  width: 600px;
  padding: 10px;
  background-color: rgba(109, 109, 109, 0.93);
  margin-left:-300px;
  margin-top:-150px;
}

.portfolio-5__close-window {
  color: #FFFFFF;
  position: absolute;
  right: 10px;
  top: 10px;
}