Как сделать увеличение картинки при нажатии с появлением белой рамки вокруг картинки

Question

Как сделать увеличение картинки при клике на ней, с появлением белой рамки вокруг картинки и крестика для закрытия в правом верхнем углу этой рамки.

мой код:

<div class="features-card-second">
                    <img  src="путь к картинке" >
                    <div class="features-circle">
                    </div>
                </div>

Answer 1

Например вот так:

function open_photo(photo) {
  document.getElementById("big-photo").innerHTML =
    ("<img onclick='close_photo()' style='position: absolute;' src='" + photo + "'>")
}

function close_photo() {
  document.getElementById("big-photo").innerHTML = ""
}

.photo {
  width: 200px;
}

<span id="big-photo"></span>
<img onclick="open_photo('https://api.time.com/wp-content/uploads/2019/08/better-smartphone-photos.jpg')" class="photo" src="https://api.time.com/wp-content/uploads/2019/08/better-smartphone-photos.jpg">

Дальше дело кастомизации и настройки стилей. При нажатии на миниатюру картинка откроется в полном размере, при нажатии по открывшейся картинке - скроется в миниатюру.

Answer 2

Два часа работы (из них час картинки выбирал)) и получается вот такая галерея "с нуля":

const oGallery = document.querySelector('.gallery');
oGallery.addEventListener('click', function(ev) {
  if (ev.target.tagName != 'IMG') { return false; };
  let oTarget = ev.target, nWidth, nHeight, nRatio = oTarget.offsetWidth / oTarget.offsetHeight;
  let oBig = this.appendChild(document.createElement('DIV'));
  oBig.style.position = `absolute`;
  oBig.style.top = `${oTarget.offsetTop}px`; oBig.style.left = `${oTarget.offsetLeft}px`;
  oBig.style.width = `${oTarget.offsetWidth}px`; oBig.style.height = `${oTarget.offsetHeight}px`;
  if (this.offsetHeight < this.offsetWidth) {
    nHeight = this.offsetHeight; nWidth = nHeight * nRatio;
  } else {
    nWidth = this.offsetWidth; nHeight = nWidth / nRatio;
  };
  oBig.style.background = `center / 100% 100% no-repeat url('${oTarget.currentSrc}')`;
  oBig.insertAdjacentHTML('beforeend', '<div class="close">×</div>');
  oBig.addEventListener('transitionend', function() { this.querySelector('.close').style.opacity = 1; });
  oBig.addEventListener('click', function(ev) {
    ev.stopPropagation();
    this.addEventListener('transitionend', function() { this.remove(); });
    this.style.transition = `.5s ease-in`;
    this.style.height = this.style.width = `0px`;
  oGallery.classList.toggle('show', false);
  });
  oBig.classList.toggle('active');
  oBig.style.width = `${nWidth / 1.3}px`; oBig.style.height = `${nHeight / 1.3}px`;
  oBig.style.top = oBig.style.left = `50%`;
  oBig.style.transform = `translate(-50%, -50%) rotate(1turn)`;
  oGallery.classList.toggle('show', true);
});

body { margin: 0; height: 100vh; overflow: hidden; background: 0% 0% / auto no-repeat url('https://i.stack.imgur.com/m9NKc.png'), #58555c; }
.gallery {
  position: relative; display: flex; flex-flow: row wrap;
  justify-content: space-evenly; align-items: center;
  height: 100%; width: 90%; margin: 0 auto;
  background-color: #fff;
}
.gallery img {
  height: auto; width: 200px; margin: 10px;
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px #919191;
  transition: .5s linear; cursor: pointer;
}
.show img { opacity: .25; pointer-events: none; }
.active {
  transition: box-shadow .5s linear .5s, top 1s ease-out, left 1s ease-out, transform 1s ease-out, width 1s ease-in, height 1s ease-in;
  box-shadow: 0 0 0 10px #fff; filter: drop-shadow(1px 2px 6px #000);
  pointer-events: none;
}
.close {
  position: relative; left: 100%;
  height: 20px; width: 20px;
  transform: translate(0%, -100%);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 2px 2px #000;
  font: bold 20px/20px Arial; text-align: center;
  background-color: #000; color: #fff;
  pointer-events: auto; cursor: pointer;
  transition: 1s linear; opacity: 0;
}
.active .close:hover { transform: translate(0%, -100%) rotate(.5turn); transition: 1s ease; }

<div class="gallery">
  <img src="https://i.stack.imgur.com/MraLT.jpg"><img src="https://i.stack.imgur.com/VxVNC.jpg"><img src="https://i.stack.imgur.com/A9VLC.jpg"><img src="https://i.stack.imgur.com/oYG0R.jpg">
  <img src="https://i.stack.imgur.com/MraLT.jpg"><img src="https://i.stack.imgur.com/VxVNC.jpg"><img src="https://i.stack.imgur.com/A9VLC.jpg"><img src="https://i.stack.imgur.com/oYG0R.jpg">
</div>

Можно было ещё добавить навигацию стрелками и эффекты, но в вопросе этого не было.

БЛОГ НА HUSL

Как сделать увеличение картинки при нажатии с появлением белой рамки вокруг картинки

Ответы (2 шт):