HTML Show enlarged image by clicking

Question

I am creating a Drag and Drop system to assemble a piece. My question is the following:

When you click on this button, I need the image of the icon of the button to appear enlarged in the yellow area. Any idea how to do it? (Remembering that I am not experienced in the field)

Answer 1

This you can do with jQuery by placing an event that, when clicking on the image, is created a copy of the image in the desired area, below follows an approach of how to do:

$('.open-image').on('click', function () {
  $('#preview').html($(this).find('img').clone());
});

.columns {
  display: flex;
}
.columns ul {
  margin: 0;
  padding: 0;
  width: 25%;
}
.columns li {
  list-style: none;
  margin: 0 15px 15px 15px;
}
.columns img {
  display: block;
  width: 100%;
}
.columns > div {
  width: 50%;
}
#preview {
  background: #efefef;
  min-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
  <ul>
    <li><a class="open-image" href="http://www.stockvault.net/data/2011/03/20/119798/preview16.jpg" title="Imagem 1"><img src="http://www.stockvault.net/data/2011/03/20/119798/preview16.jpg" alt="Imagem 1"></a></li>
    <li><a class="open-image" href="http://images.freeimages.com/images/large-previews/733/motor-parts-3-1316894.jpg" title="Imagem 2"><img src="http://images.freeimages.com/images/large-previews/733/motor-parts-3-1316894.jpg" alt="Imagem 2"></a></li>
  </ul>
  <div>
    <div id="preview"></div>
  </div>
  <ul>
    <li><a class="open-image" href="http://images.freeimages.com/images/large-previews/31a/motor-parts-5-1316882.jpg" title="Imagem 3"><img src="http://images.freeimages.com/images/large-previews/31a/motor-parts-5-1316882.jpg" alt="Imagem 3"></a></li>
    <li><a class="open-image" href="http://images.freeimages.com/images/large-previews/c97/motor-parts-1-1316906.jpg" title="Imagem 4"><img src="http://images.freeimages.com/images/large-previews/c97/motor-parts-1-1316906.jpg" alt="Imagem 4"></a></li>
  </ul>
</div>

Answer 2

Here is the link from zoom plugin that can help you solve your problem.

Here is the full image gallery

The data has a lot of content, the best thing to do is to read the documentation.