Transform scale "Zoom" on hover with max width?

Question

EDIT:: Resolved, rather than using transform, changing the background-size worked, thank you all.

I am trying to transform the scale of one of the divs while keeping a max width, like a zoom effect, however it ignores the max width?

.Img2 {
  position: relative;
  height: 300px;
  display: inline-block;
  width: 400px;
  float: left;
  padding: 0;
  cursor: pointer;
}
.box2 {
  height: 300px;
  max-width: 400px;
  width: 400px;
  display: inline-block;
  background-size: contain;
  background-position: center;
  background-color: black;
}
.box2:hover {
  transform: scale(1.03);
}

<li class="Img2">
  <div class="box2"></div>
</li>

Answer 1

From the MDN article on CSS transforms:

By modifying the coordinate space, CSS transforms change the shape and position of the affected content without disrupting the normal document flow.

This is why your transform: scale() is not affected by your max-width constraint. Instead, you'll want to scale the height (Y dimension) while keeping the width (X dimension) the same (read more). See updated example below:

.Img2 {
    position: relative;
    height: 300px;
    display: inline-block;
    width: 400px;
    float: left;
    padding: 0;
    cursor: pointer;
}
.box2 {
    height: 300px;
    max-width: 400px;
    width: 400px;
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-color: black;
}
.box2:hover {
    transform: scale(1, 1.03);
}

<li class="Img2">
    <div class="box2"></div>
</li>