CSS transition: background size not working
<p>I'm developing a website where when you hover over an image it zooms out so that you can see the entire image without having to zoom out too much to see the background of the div. </p>
<p>This is what my HTML looks like: </p>
<pre class="brush:html;toolbar:false;"><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>
</pre>
<p>And my CSS: </p>
<pre class="brush:css;toolbar:false;">: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: gray;
}
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 */
}
</pre>
<p>I tried looking for solutions and they all said to do it my way. This scales the background image to the correct size, but the transition doesn't work. </p>
<p>I also tried changing the div so that it has an image tag inside the div, but that didn't work either. </p>