CSS transition: background size not working

Question

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.

This is what my HTML looks like:

<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>

And my 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: 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 */
}

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.

I also tried changing the div so that it has an image tag inside the div, but that didn't work either.

Answer 1

It turns out that transition does not work with automatic and some other properties (overridden, included, inherited, initial, unset). The solution I found was to use JavaScript using the following code:

img.onload = function () {
    let height = img.naturalHeight;
    let width = img.naturalWidth;
    let ratio = height / width;
    img.surroundingDiv.bgSize = "" + ((1 / ratio) * 100) + "%";
    img.surroundingDiv.style.backgroundSize = this.surroundingDiv.bgSize;
};

transitionDiv.style.backgroundImage = "url(" + img.src + ")";
transitionDiv.onmouseenter = function () {
    this.style.backgroundSize = 100 + "%";
};
    
transitionDiv.onmouseleave = function () {
    this.style.backgroundSize = this.bgSize;
};

First I calculate the ratio to figure out how much to scale the image when it is not hovered over it. I have to store this value to be used in the onmouseleave event by creating a new property bgSize in the div and storing it there.

I then use the onmouseenter and onmouseleave events to change the image size when hovering over it.

I also removed the :hover selector in the css file as it is now obsolete.