CSS transition not responding-CodePudding

I'm new to using transitions and my transition is not responding. There must be something wrong with my code. I'm using cards on my site and I added a (mouseenter) to have the info on the card display when the mouse is hovered, it works but the transition is throwing an error there's probably something I'm not understanding, any help is appreciated!

        <div >
            <div >
                <h5>Title</h5>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
                <a href="">Link goes here</a>
                <div >
                    <img src="../static/img/search.png"  alt="">
                </div>
            </div>
        </div>
.card{
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 350px;
    height: 180px;
    background: lightgreen;
    border: 2px solid black;
    margin-left: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}
.inner-card{
    display: none;
    
} 
.inner-card.active{
    display: flex;
    flex-direction: column;
    justify-content: end;
    background:rgba(255,165,0,0.5)
    transition: all 400ms ease-in-out;

}

    <script>
        $(document).ready(function () {
            $('.card').on('mouseenter', function () {
                $(this).find(".inner-card").toggleClass('active');
            });
            $('.card').on('mouseleave', function () {
                $(this).find(".inner-card").toggleClass('active');
            });
        });
    </script>

CodePudding user response：

If I understood correctly and you need the text to be presented during the review, then here it is.

.inner-card a{
  color: inherit;
  text-decoration: none;
  text-decoration: underline;
}

.inner-card{
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 350px;
  height: 180px;
  margin-left: 8px;
  margin-top: 15px;
  color: lightgreen;
  background-color: lightgreen;
  border: 2px solid black;
  padding: 10px;
  border-radius: 3px;
}

.inner-card:hover{
  cursor: pointer;
  color: black;
  background: rgba(255,165,0,0.5);
}

<div >
  <div >
    <h5>Title</h5>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
    <a href="#">Link goes here</a>
    <div >
      <img src="../static/img/search.png"  alt="">
    </div>
  </div>
</div>

This task can be done without js. Let me know if I misunderstood you.

CodePudding user response：

As mentioned in my comment:

display
flex-direction
justify-content

are none-animatable CSS properties, as such transition and animation will have no effect, other animatable properties in the defintion are ignored.

This can be circumvented by transitioning between opacity: 0 and 1.

In the snippet, class .inner-card is defined as you normally would, but using opacity: 0 to 'hide' its content.

Selector .card:hover .inner-card {..} is introduced to control the transition to opacity: 1 without the need for JS.

To be complete, class .inner-card needs a transition for a smooth transition back to original when the cursor leaves the card.

.card{
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 350px;
    height: 180px;
    background: lightgreen;
    border: 2px solid black;
    margin-left: 8px;
    margin-bottom: 8px;
}
.inner-card{
  display: flex;
  flex-direction: column;
  justify-content: end;
  opacity: 0;
  background-color: transparent;
  transition: opacity 400ms ease-in-out, background-color 400ms ease-in-out;
} 
.card:hover .inner-card {
    cursor: pointer;
    opacity: 1;
    background-color:rgba(255,165,0,0.5);
    transition: all 400ms ease-in-out;
}

<div >
  <div >
    <h5>Title</h5>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
    <a href="">Link goes here</a>
    <div >
      <img src="../static/img/search.png"  alt="">
    </div>
  </div>
</div>