css Question posted in
Some basic documentation can be found here.

Css – img tag don't inherit transition properties from its parent

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

2

Answers


  1. 0

    CSS properties can only be inherited when one element is a descendant of another element. In you css code sample you use ‘&’ in front of ‘img’, which means ‘and’. So the styles will be only applied to elements which have both selectors (.section-about–card and img). If your img tag is inside .section-about–card you should delete the ‘&’ and it should be working fine.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search