img tag don't inherit transition properties from its parent

February 1, 2024

I want my image tag automatically inherit transition property from its grand parent element (Div) but its not working. I don’t want to write the same piece of code again because there’s other element in which i have to use this properties.

& .section-about--card {
  text-align: center;
  text-transform: capitalize;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  & img {
    width: 15rem;
    aspect-ratio: 1;
    border: 1px solid var(--red);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    &:hover {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
    }
  }
}

<div class="section-about--card">
  <div class="about-card--image">
    <img src="https://www.timeoutdubai.com/cloud/timeoutdubai/2021/09/11/hfpqyV7B-IMG-Dubai-UAE.jpg" alt="animated market size photo" />
    <h3>dubai</h3>
  </div>
  <p class="about-card--details"> some data about the image
  </p>
</div>

>Solution :

transition should be set on the element you’re actually trying to animate/transition.
Set the :hover on the .section-about--card selector. Also use .section-about--card instead of & .section-about--card

.section-about--card {
  text-align: center;
  text-transform: capitalize;

  & img {
    width: 15rem;
    aspect-ratio: 1;
    border: 1px solid var(--red);
    border-radius: 50%;
    transition: all 0.3s linear;  /* move it here */
  }
  
  &:hover img {
    transform: rotateY(180deg);
  }
}

<div class="section-about--card">
  <div class="about-card--image">
    <img src="https://www.timeoutdubai.com/cloud/timeoutdubai/2021/09/11/hfpqyV7B-IMG-Dubai-UAE.jpg" alt="animated market size photo" />
    <h3>dubai</h3>
  </div>
  <p class="about-card--details"> some data about the image</p>
</div>