Code For Hover Image To Be Responsive On Different Screen Sizes

I need to insert a code that would zoom the image when the cursor is hovered over it and when clicked on takes you to a certain page.

The code works but it messes up the appearance of the boxes when it's viewed on a smaller (laptop) screen. I need the code to be responsive on all types of screens.

For reference, the larger desktop screen is around 24"x13.5" & the smaller (laptop) screen is around 13.5"x7.5" .

My code: 

<style> .hover-image { overflow: hidden;  width: 100%;  height: auto; max-height: 350px;  }  .hover-image img { transition: transform 0.3s ease, filter 0.3s ease; width: 100%;  height: auto; display: block; } .hover-image img:hover { transform: scale(0.5,0.5); } </style> <div class="hover-image"> <a href="https://www.cubecom.ca/605-rogers-rd-york " target="_blank"> <img src="https://static1.squarespace.com/static/66991b4abbb62d2d2621ee4f/t/66a8fff5dce3b53f0d348da2/1722351607151/Untitled+design+%283%29.png" alt="Descriptive Text"> </a> </div>

In the screenshots you can see that the tittles move up when I view it on a small screen.

www.cubecom.ca 

Please help!

I see both screenshots look same. Can you describe in more detail?