How to inherit color properties from figures to figcaptions

Question

I'm trying to make a figure that changes the background color of the contained image when i hover over it with my mouse. I was able to do as much and then trying to go up a level by trying to change the color of the caption and the background using a class but when i hover over the image it isn't working fully.

What i tried to do was to place the class with the background and text color in the figure and thought that it would just make the caption inherit the text color but that didn't happen.

I also tried, alternatively, to give the caption its own hover property, and it does work, but not properly.

You see if I give the figure a background color and text color then only the background changes color as seen below

Before hovering After hovering

The text is still blue and i have written it to be white.

and when i apply the code directly on the caption this happens

Not hovering on the caption When hovering on the caption

So as you can see, the caption only lights up when my cursor is on it, but i want it to light up when my cursor is hovering over any part of the image, so what i really want to know is, if there even is a way to do this, any help would be really helpful.

Here is the code i used for this

figcaption {
    color: #3a7cc4;
}

.change {
    box-shadow: 0px 0px 30px lightgray;
    transition: all 0.2s linear;
}

.change:hover{
    background-color: #3a7cc4;
    transition: all 0.2s linear;
    color: white;
}

And then i changed the caption color separately, to make it change color

figcaption:hover {
    color: white;
}

Edit-

Here's a working snippet as well for the code:

.change {
  box-shadow: 0px 0px 30px lightgray;
  transition: all 0.2s ease-in;
}

.change:hover {
  background-color: #3a7cc4;
  transition: all 0.2s ease-in;
  color: white;
}

figcaption:hover {
  color: white;
}

<div class="column change">
<figure>
  <img src="https://i.imgur.com/N7vSN08.jpeg">
  <figcaption>Tree Fort</figcaption>
  </figure>
  </div>

Answer 1

Assuming it is the figure that has the change class then it can set the color for the text and it can be inherited by the caption.

In the CSS given in the question however the figcaption overrides any inherited color by setting it itself. Hence it doesn't change when the figure is hovered.

So this snippet removes that and instead places the blueish color setting in the figure. This then gets inherited when there is no hovering. When there is hovering the setting of color as white gets inherited.

<style>
  .change {
    box-shadow: 0px 0px 30px lightgray;
    transition: all 0.2s linear;
    color: #3a7cc4;
  }
  
  .change:hover {
    background-color: #3a7cc4;
    transition: all 0.2s linear;
    color: white;
  }
</style>

<figure class="aligncenter size-full change"><img loading="lazy" width="477" height="587" src="https://cid17970jan2022.kinsta.cloud/wp-content/uploads/2022/01/image.jpg" alt="" class="wp-image-6889" srcset="https://cid17970jan2022.kinsta.cloud/wp-content/uploads/2022/01/image.jpg 477w, https://cid17970jan2022.kinsta.cloud/wp-content/uploads/2022/01/image-244x300.jpg"
    sizes="(max-width: 477px) 100vw, 477px">
  <figcaption>Tree Fort</figcaption>
</figure>

Note: if it is an ancestor element rather than the figure that has the change class the CSS selectors will need changing to .change figure