I am struggling to get a transition on the .blue div, while hovering the parent - .red div.

What I want to achieve is a slow transition, say 1s from display: none, to block.

The stylesheet is in SCSS and is nested. Can someone please help me out?

Codepen fiddle

HTML:

<div class='app'>
  <div class='red'>
    <div class="blue"></div>
  </div>
</div>

SCSS:

.app {
  heigh: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  .red {
    position: relative;
    background-color: red;
    height: 30rem;
    width: 30rem;
    &:hover {
      .blue {
        display: block;
      }
    }
    .blue {
      display: none;
      height: 10rem;
      width: 10rem;
      position: absolute;
      background-color: blue;
      // transition: 1s; DOESNT WORK
    }
  }
}

CodePudding user response：

.app {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  .red {
    position: relative;
    background-color: red;
    height: 30rem;
    width: 30rem;
    &:hover {
      .blue {
        opacity: 1;
      }
    }
    .blue {
      opacity: 0; //add opacity
      height: 10rem;
      width: 10rem;
      position: absolute;
      background-color: blue;
      transition: 1s;
    }
  }
}