html - CSS, hover one element, affect another with transition

I have an issue with my CSS and I don't understand why I am not able to create a transition for my overlay element (.afterDim). My overlay is working, however I don't find how to make the transition between the two states. I tried to play with my classes but nothing seems to work, I am a little bit lost and I need your help on this one.

    .dimImgContainer .afterDim {
      position: absolute;
      top: 0;
      left:10px;
      width:calc(100% - 20px); 
      height: 100%;
      display: none;
      color: #FFF;
      -moz-transition: all 0.3s ease-in-out;

      -o-transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; 
    }

    .dimImgContainer:hover > .afterDim {
      display: block;
      background: rgba(0, 0, 0, .6);
    }

      

        
Hello there
        
        
General Kenobi
      
    

I have also made a codepen with quite the same code here:

https://codepen.io/dimitrilpc/pen/oEEQoG

Answer

Display property is ON or OFF and can not be used with transitions. Instead use property that can have a range of values like Opacity.

.image-container .afterDim {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    opacity: 0; /* CHANGE DISPLAY to OPACITY */
    color: #FFF;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; 
}
.image-container:hover .afterDim {

    opacity: 1; /* CHANGE DISPLAY to OPACITY */
    background: rgba(0, 0, 0, .6);
}