0
175
ViewsCSS transition not responding
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 class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
<a href="">Link goes here</a>
<div class="img-div">
<img src="../static/img/search.png" class="card-img" 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>
2 answers
Answer question0
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 class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
<a href="">Link goes here</a>
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>0
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 class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
<a href="#">Link goes here</a>
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>This task can be done without js. Let me know if I misunderstood you.