I am trying to reveal my p text it doesn’t using transition.
I’m trying to resolve it from hour but does not understand why it’s not working.
.section-about--card {
width:100%;
height: 15rem;
border: 1px solid black;
transition: all 1s linear;
& .about-card--details {
text-align: center;
text-transform: capitalize;
height: 0px;
overflow: auto;
}
&:hover .about-card--details{
height:50px;
}
}<div class="section-about--card">
<p class="about-card--details">
some text
</p>
</div>>Solution :
CSS Transition will not be inherited by child elements. Add the transition to the child .about-card--details.
.section-about--card {
width:100%;
height: 15rem;
border: 1px solid black;
& .about-card--details {
text-align: center;
text-transform: capitalize;
height: 0px;
overflow: auto;
transition: all 1s linear;
}
&:hover .about-card--details{
height:50px;
}
} <div class="section-about--card">
<p class="about-card--details">
some text
</p>
</div>