Переход происходит мгновенно, хотя у меня есть продолжительность времени

Question

Переход вступает в силу, но длительность - нет. Как исправить проблему и почему это происходит?

Html

<article class="about-img">
  <div class="about-picture-container">
    <img src="./images/about-bcg.jpeg" alt="tea kettle" class="about-picture">
   </div>
 </article>

CSS

.about-picture-container {
  background: var(--primaryColor);
  border: 0.5rem solid var(--primaryColor);
  border-radius: 1rem;
  /* overflow */
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.about-picture-container:hover .about-picture {
  opacity: 0.5;
  transform: scale(1.2);
} 

Answer 1

Вы устанавливаете переход к одному классу .about-picture-container и применяете преобразование к другому .about-picture.

Попробуйте изменить код на:

.about-picture-container .about-picture {
  background: var(--primaryColor);
  border: 0.5rem solid var(--primaryColor);
  border-radius: 1rem;
  /* overflow */
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.about-picture-container:hover .about-picture {
  opacity: 0.5;
  transform: scale(1.2);
}