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>

  <title>Parent-Child Communication</title>
  <script src="" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

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


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.