我正在开发一个网站，当您将鼠标悬停在图像上时，它会缩小，以便您可以看到整个图像，而无需缩小太多以查看 div 的背景。

这就是我的 HTML 的样子：

<div id="wrapper">
 <div id="imgDiv">
  <div id="transitionDiv" style="background-image: url("../resources/models/HA-SJX.JPG");"></div>
 </div>
 <p id="title">MALEV Cessna c172 HA-SJX (G1000)</p>
 <a href="../downloads/TP172-MALEV PS_P4exw.zip" download="MALEV Cessna c172 HA-SJX (G1000)">Download</a>
</div>

还有我的 CSS：

:root {
  --img-size: 350px;
  --button-margin: 20px;

  --dark-blue: #070b21;
  --blue: #10184a;
  --light-blue: #00d1ff;
}

div#wrapper {
  position: relative;
  margin: auto;
  margin-bottom: 100px;
  background-color: var(--dark-blue);
  width: var(--img-size);
}

div#imgDiv {
  position: relative;
  text-align: center;
  color: red;
  padding: 0;
  margin: 0;
  background-color: var(--dark-blue);
  overflow: hidden;
  height: var(--img-size);
}

div#imgDiv div#transitionDiv {
  background-position-x: 50%;
  height: 100%;
  width: 100%;
  background-size: auto var(--img-size);
  background-repeat: no-repeat;

  -webkit-transition: background-size 1500ms ease;
  -moz-transition: background-size 1500 ease;
  -o-transition: background-size 1500 ease;
  -ms-transition: background-size 1500ms ease;
  transition: background-size 1500ms ease;
}

div#imgDiv:hover div#transitionDiv {
  background-position-y: 50%;
  background-size: var(--img-size) auto;
}

p#title {
  overflow: hidden;
  height: 38px;
  margin: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

div#designs div a {
  display: block;
  text-align: center;
  text-decoration: none;
  background-color: var(--light-blue);
  color: white;
  font-size: 40px;
  font-family: "Montserrat", sans-serif;
  margin: var(--button-margin);
  padding: 0px;
  width: calc(100% - 2 * var(--button-margin));
  border-radius: 15px;
  transition: 0.5s;
}

div#designs div a#no-link {
  background-color: grey;
}

div#designs div a:hover {
  background-color: dodgerblue; /* using random color for now */
}

div#designs div a:active {
  background-color: blue; /* using random color for now */
}

我尝试寻找解决方案，他们都说按照我的方式去做。这会将背景图像缩放到正确的大小，但过渡不起作用。

我还尝试更改 div，使其在 div 内有一个图像标签，但这也不起作用。