Edit in JSFiddle

Result
HTML
CSS
JavaScript
Resources

<div class="separator" style="clear: both; text-align: center;">
  <a href="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s1600/unnamed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" height="92" src="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s200/unnamed.png" width="200" />
  </a>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
  <a href="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s1600/unnamed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" height="150" src="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s320/unnamed.png" width="320" />
  </a>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
  <a href="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s1600/unnamed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" height="187" src="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s400/unnamed.png" width="400" />
  </a>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
  <a href="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s1600/unnamed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" height="294" src="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s640/unnamed.png" width="640" />
  </a>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
  <a href="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s1600/unnamed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" src="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s1600/unnamed.png" />
  </a>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
  <img border="0" src="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s1600/unnamed.png" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
  <img border="0" height="150" src="https://4.bp.blogspot.com/-Zo7aZr3kjbI/V1Zc2Y4BC7I/AAAAAAAAm1Y/vJpFypp5PpgoeQAIeFnCO4wGdhtAdgaMQCLcB/s320/unnamed.png" width="320" /></div>
<br />

.separator img {
  width: 100%;
  height: auto;
}

.separator.new {
  width: 80%!important;
  background: #fff;
  position: absolute!important;
  top: 10%!important;
  left: 50%;
  margin-left: -40%!important;
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.separator {
  width: 50%;
  position: relative;
  transition: all 100ms ease-in-out;
  cursor: pointer;
}

.separator:before {
  content: "\f00e";
  font-family: FontAwesome;
  position: absolute;
  bottom: 4px;
  right: 0;
  font-size: 2em;
  background: rgba(255, 255, 255, .6);
  padding: 10px;
  color: #444;
}

.separator.new:before {
  content: "×";
  font-family: Arial;
  position: absolute;
  font-weight: 400;
  bottom: 100%;
  top: -10px;
  line-height: 1;
  right: -30px;
  font-size: 2.5em;
  background: none;
  padding: 0;
  color: #fff;
}

.wrap_separator {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .8);
  z-index: 99999
}

@media screen and (max-width:768px) {
  .new {
    width: 90%!important;
    margin-left: -45%!important;
  }
  .separator.new:before {
    top: -35px;
    right: -3px;
  }
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

$(".separator a > img").unwrap();

$('.separator').each(function() {
  $(this).click(function() {

    if ($(this).parent().is("div")) {
      $(this).removeClass('new').unwrap();
    } else {
      $(this).addClass('new').wrap('<div class="wrap_separator"></div>');
    }

  });
});

function resizeThumbsmall(size) {
  var image = document.querySelectorAll('.separator img');
  for (var i = 0; i < image.length; i++) {
    image[i].src = image[i].src.replace(/\/s200/, "/s" + size + "");
    image[i].width = size;
    image[i].height = size;
  }
}
resizeThumbsmall('1600');

function resizeThumbmedium(size) {
  var image = document.querySelectorAll('.separator img');
  for (var i = 0; i < image.length; i++) {
    image[i].src = image[i].src.replace(/\/s320/, "/s" + size + "");
    image[i].width = size;
    image[i].height = size;
  }
}
resizeThumbmedium('1600');

function resizeThumblarge(size) {
  var image = document.querySelectorAll('.separator img');
  for (var i = 0; i < image.length; i++) {
    image[i].src = image[i].src.replace(/\/s400/, "/s" + size + "");
    image[i].width = size;
    image[i].height = size;
  }
}
resizeThumblarge('1600');

function resizeThumbextralarge(size) {
  var image = document.querySelectorAll('.separator img');
  for (var i = 0; i < image.length; i++) {
    image[i].src = image[i].src.replace(/\/s640/, "/s" + size + "");
    image[i].width = size;
    image[i].height = size;
  }
}
resizeThumbextralarge('1600');

External resources loaded into this fiddle:

e749edc6be.js