How to view large size image in a different box while mouse hover using HTML and css

I need one help. I need to enlarge the image in a different box while mouse hover into it using HTML and CSS. I am explaining my code below.

.thumbnail:hover {
  position: relative;
  top: -25px;
  left: -35px;
  width: 500px;
  height: auto;
  display: block;
  z-index: 999;
}
<!DOCTYPE html>
<html>

<head>
  <title>Parent-Child Communication</title>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>

<body>
  <div class="input-group bmargindiv1 col-md-12">
    <img src="1234.jpg" class="thumbnail" height="100" width="100" />
  </div>
  <div class="input-group bmargindiv1 col-md-12">
    <img src="coupon-banner-blank.jpg" class="thumbnail" height="100" width="100" />
  </div>
</body>

</html>

Now in this case when user is mouse hovering on the existing image it is expanding but here I need when user will mouse hover on this image the image will display in a different box in large size and the image quality should be as it was. Please help.