CSS hover Probleme

by Ulrich Bangert

HTML

<div class="output-Main-Div">

        <div class="output-Container">
              <div class="container-headline">
              <h2>
              Joshua
              </h2>
              </div>
        </div>


         <div class="output-Container">
             <div class="container-headline">
                 <h2>
              Joshua
              </h2>
              </div>
        </div>

     
        <div class="output-Container">
             <div class="container-headline">
                 <h2>
              Joshua
              </h2>
              </div>
        </div>

     
        <div class="output-Container">
               <div class="container-headline">
                 <h2>
              Joshua
              </h2>
              
              </div>
        </div>

     
     
     

</div>

CSS

.output-Main-Div{
         width:100%;
  height:310px;
  display: flex;
      }
    
      
.output-Container{
flex-grow: 1;
height:80%;
    margin: 2% 0.25% 2% 0.25%;
  display:inline-block;
background-color:red;
         transition: flex-grow, height , width , margin 2s; 
            transition-duration: 1.5s;
            vertical-align: top;
}
 
      .output-Container:hover{ 
         height: 100%;
          flex-grow: 2;
          margin: 0% 0.25% 0% 0.25%;
      }   
      
      
      .container-headline{
        opacity: 0;
        transition: opacity 1.5s;
      }
      .output-Container:hover .container-headline{
        opacity: 1;
      }