Как сделать, чтобы по клику на изображение появлялось в 2 раза больше изображение(попап) без плагинов?

$(".popup img").click(function () {
        var $src = $(this).attr("src");   // по клику берет аттрибут
        $(".show").fadeIn();   // показывает див
        $(".img-show img").attr("src", $src);   // подставляет img src
    });

$("span, .overlay").click(function () {
        $(".show").fadeOut();
    });

.img-show span{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    cursor: pointer;
}

<div class="gallery__wrap"> 
         <div class="gallery__item">
                      <div class="gallery__image" style="background-image: url(img/news__image.jpg)">  
                      </div>
                        <p class="gallery__description">описание фотки</p>
          </div>
          <div class="gallery__item">
                      <div class="gallery__image" style="background-image: url(img/news__image.jpg)">  
                      </div>
                        <p class="gallery__description">описание фотки</p>
        </div>

<div 
  class="gallery__image"  
  style="background-image: url(img/news__image.jpg)"
  data-img="img/BIG_IMAGE_news__image.jpg">  
</div>

popup img - это изображение по умолчанию
тоесть маленькое?
а .show .img-show -большое?