css Question posted in
Some basic documentation can be found here.

Css – when hover an element but does not affect other element transition property

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>
Tags:

2

Answers


  1. 0

    I am not sure you want to either make the font of the text bigger or you want to make the height of the text container bigger.

    lets cover both situation:

    in your example, you just need to add background color to .about-card–details like background-color: yellow; to make it more noticeable

    and you have your transition on the wrong spot
    please move transition: all 1s linear; to & .about-card--details becasue you want transition to be done on .about-card--details

    second sitution if you want to make the font bigger you simply do the following:

    .section-about--card {
  width: 100%;
  height: 15rem;
  border: 1px solid black;

  .about-card--details {
    text-align: center;
    text-transform: capitalize;
    height: 10px;
    transition: all 1s ease;

    &:hover {
      height: 50px;
      font-size: 50px;
      background-color: yellow;
    }
  }
}
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search