CSS hover Probleme

by philip2725

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;
  overflow-x:scroll;
  overflow-y:hidden;
  white-space:nowrap;
      }
    
      
.output-Container{
  width:24.5%;
  height:80%;
    margin: 2% 0.25% 2% 0.25%;
  display:inline-block;
background-color:red;
         transition: height , width , margin 2s; 
            transition-duration: 1.5s;
}
 
      .output-Container:hover{ 
         height: 100%;
          width: 30%;
          margin: 0% 0.25% 0% 0.25%;
            transition: height , width , margin 2s; 
            transition-duration: 1.5s;
          transition-delay: 0.3s;
      }   
      
      
      .container-headline{
        display:none;
      }