Trying to zoom in on image over hover

I am creating a website for a project and got stuck with an issue. I was trying to implement the hover feature, where when I hover over the image it gets zoomed in. That part works nicely, however, I was having an issue when I hover over the last book in the first row. When I hover over that, the entire screen becomes glitchy. This feature is not working as I hoped, i.e. smooth and good to work with. I have attached the image and the code I have.

Thanks for any help!

.books img{
width:200px;
height:300px;
}

.books img:hover {
  position: relative;
  left: 45px;
  width: 300px;
  height: 400px;
  display: block;
}

I found some code online using -mox-transform and -webkit-transform, however, I have never worked with that before. This seemed complex for me. Any suggestions if I should learn how that works instead of perfecting the above code?