Element's animation doesn't work after wrapping it with div

Question

HTML: Primary animation on load works, also animation on cards:hover DOES work without .div insidecard. I need this .insidecard to wrap elements to make sure the last card won't go to the next line and keep it responsive.

<div class="cards">
  <div class="showcards">Show Cards</div> 
    <div class="insidecard">
        <img class="insidecard01" src="img/cards/01.jpg">
        <img class="insidecard02" src="img/cards/03.jpg">
        <img class="insidecard03" src="img/cards/02.jpg">
    </div>
</div>

Here's CSS. Animation Keyframes are fine, so I guess no need to show them.

    .cards {
    overflow: hidden;
    }
    .insidecard {
      width: 600px;
      display: block;
    }
    .cards:hover > .insidecard02 {
      animation: cardsout02 0.6s linear;
    }
    .cards:hover > .insidecard03 {
      -webkit-animation: cardsout03 0.6s linear;
    }

score 0 · Answer 1 · answered Apr 27 '21 at 09:29

Since the structure changed, now your image elements are not children of .cards anymore, so change the CSS like so

.cards:hover .insidecard02 {
  animation: cardsout02 0.6s linear;
}
.cards:hover  .insidecard03 {
  -webkit-animation: cardsout03 0.6s linear;
}

removing the child combinator >

score 0 · Answer 2 · answered Apr 27 '21 at 09:30

Your CSS should be like

.cards:hover > .insidecard > .insidecard02{
    // Your animation here
}

It's selecting it's child with a class insidecard with a child insidecard02. The > is used for selecting children of a parent only, not the children of it's children.

You can read that more in here CSS Selector

Element's animation doesn't work after wrapping it with div

2 Answers2