Zoom in on the image (open larger when clicked)

I wanted to zoom in on the image but have to open it larger when I click if I have how to do it?

Code:

        <div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="compra1.png" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
       <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#comprar">Comprar</button>
      </div>
    </div>
  </div>