Zoom In Image (JavaScript)

Question

I have polaroid gallery images style. But what I want is when I click the image, it will zoom in or enlarge the image.

I don't know how to achieve it on my else statement. I tried to flipp it when I click the image and it works like this:

.photo.flipped .side-front {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.photo.flipped .side-back {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  transform: rotateY(0);
}

JavaScript:

item.addEventListener('click', function () {
  if ((currentData != dataSize[item.id]) || (currentData == null)) {
    select(dataSize[item.id]);
    shuffleAll();
  } else {
    /*Paul Zoom In Photo*/
    item.classList.contains('zoomed') === true ? item.classList.remove('zoomed') : item.classList.add('zoomed');
    /*END*/
  }
});

And this is my CSS:

body {
  background-color: #F2EBE2;
}

.fullscreen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.photo {
  position: absolute;
  cursor: pointer;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  transition: all 0.6s;
}

.side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transition: transform 0.6s;
  -moz-transition: transform 0.6s;
  transition: transform 0.6s;
}

.side-back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  display: table;
}

.side-back div {
  display: table-cell;
  vertical-align: middle;
  background-color: rgb(0, 0, 0);
}

.side-back p {
  padding: 2px;
  color: #d7551d;
  font-family: Helvetica, Arial, sans-serif;
}


figure {
  width: 150px;
  position: absolute;
  /* padding: 30px; */
  margin: 0 auto;
  text-align: center;
  background-color: rgb(10, 10, 10);
}

figure img {
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  /*margin-bottom: 15px;*/
}

figure img.zoomed{
  position: fixed;

  top: 5vh;
  bottom: 5vh;
  left: 5vw;
  right: 5vw;

  max-width: 90vw;
  max-height: 90vh;

  margin: auto;

  border: 4px solid #000
}

figure figcaption {
  font-family: Comic Sans, Comic Sans MS, cursive;
  color: #f85a16;
  font-size: 10px;
}

.navbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: black;
  z-index: 999;
}

button {
  background-color: transparent;
  padding: 10px 24px;
  color: #ffffff;
  border: 2px solid black;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

button:hover {
  background-color: #a00;
  color: white;
}

#copyright {
  font-family: Consolas, Verdana, Arial, sans-serif;
  position: fixed;
  color: #ccc;
  text-decoration: none;
  bottom: 20px;
  right: 10px;
}

#copyright:hover {
  color: white;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  #forkme {
    display: none;
  }

  #copyright {
    position: relative;
    display: block;
    text-align: center;
    right: 0px;
    bottom: 0px;
  }
}

Answer 1

One way, as mentioned, is to use transform: scale(2);

Another easy way is:

document.querySelector('img.sample-image').addEventListener('click', function() {
    this.classList.toggle('sample-image-large');
});

.sample-image {
    transition:all 1s ease;
    width: 100%;
}

.sample-image-large {
    width: 200% !important;
}

  <img src="http://c.s-microsoft.com/en-us/CMSImages/Explore_ShareBG_0330_1600x560_EN_US.jpg?version=19f9bdc2-cbab-929d-bd00-48f537b9f7e8" class="sample-image">