title: how to make delay for hover:after
body: <p>when hover on element I want it to scale(1.2) and then after .6 delay hover for :after</p>
  <p>I tried something and its looking like that:</p>
  <pre><code>.recipes {
              width: 100%;
              padding: 2rem;
              display:flex;
              flex-wrap: wrap;
              justify-content: space-between;
                  
              .mb-3 {
                  transition: transform .5s ease 0s;
                  
                  &amp;:hover {
                      transform: scale(1.3);
                      z-index: 2;
                  }
                  &amp;::after{
                      transition: background-color ease .6s;
                      
                  }
                  &amp;:hover::after {
                      content: &quot;Click on me for full Recipe&quot;;
                      background-color: black;
                      width: 100%;
                      height: 100%;
  
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      font-size: 2rem;
                      color: white;
                      position: absolute;
                      filter: opacity(.85);
                  }
  
              }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/IdLis.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IdLis.png" alt="enter image description here" /></a></p>
  <p>I want the black background and the content to be visibale after the transition for scale is finish</p>
  <p>for now it it is not doing delay for the :after</p>