My animation is not working when I pass the mouse

Question

Good night!

I’m looking to make a site and in one part of it I’m looking to do a fadein animation with css, when the user hovers the mouse in the DIV appears another not in a "dry" way but with some transition. But I’m going through a hard time, I’ve put Animation in the parent class, but it still doesn’t work.

If anyone can help I’d appreciate it!

follows below the HTML and CSS code I made

.minha-foto {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 325px;
  max-height: 325px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  min-width: 300px;
  max-width: 300px; 
}

.minha-foto .redes-sociais {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.4) 100%);
    display: none;
    animation-duration: 0.7s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.minha-foto .redes-sociais ul {
      display: flex;
      list-style: none;
      padding-left: 0;
}

 .minha-foto .redes-sociais ul li {
        margin-left: 10px;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
}

 .minha-foto .redes-sociais ul li a i {
          font-size: 30px;
          color: #fff;
}

 .minha-foto .redes-sociais:hover ul li:first-child {
    background: #3074B3;
}

.minha-foto .redes-sociais:hover ul li:nth-child(2) {
    background: #575EA4;
}

 .minha-foto .redes-sociais:hover ul li:last-child {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

 .minha-foto:hover .redes-sociais {
  display: flex;
}

 .minha-foto:hover .redes-sociais ul li {
    width: 50px;
    height: 50px;
}

<div class="col-md-5 minha-foto offset-md-2 my-auto" style="background-image:url('//localhost:3000/godoyportfolio/wp-content/themes/godoy/inc/img/eu-4.jpeg')">
      <div class="redes-sociais">
           <ul>
             <li><a href="#"><i class="fab fa-linkedin"></i>                </a></li>
             <li><a href="#"><i class="fab fa-facebook-square">               </i></a></li>
              <li><a href="#"><i class="fab fa-instagram"></i>              </a></li>
            </ul>
      </div>
</div>

Answer 1

Dude first, you gotta put position:relative in the photo container, so the overlay shadow that is inside the container does not cover the entire screen. Then, display is not a property "animável" you can not animate display, a suggestion is to animate using opacity, so the image is transparent, and in the Hover you show putting opacity:1

Just like the display the float tb is a property that cannot be animated for example. Check here for a list of all properties that are "anime" https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

.minha-foto {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 325px;
    max-height: 325px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    min-width: 300px;
    max-width: 300px; 

    position: relative;
  }
  
  .minha-foto .redes-sociais {
      width: 100%;
      height: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.4) 100%);
      opacity: 0;
      transition: 1s opacity linear;
  }
  
  .minha-foto .redes-sociais ul {
        display: flex;
        list-style: none;
        padding-left: 0;
  }
  
   .minha-foto .redes-sociais ul li {
          margin-left: 10px;
          width: 50px;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
opacity: 0;
transition: 1s opacity linear;
  }
  
   .minha-foto .redes-sociais ul li a i {
            font-size: 30px;
            color: #fff;
  }
  
   .minha-foto .redes-sociais ul li:first-child {
      background: #3074B3;
  }
  
  .minha-foto .redes-sociais ul li:nth-child(2) {
      background: #575EA4;
  }
  
   .minha-foto .redes-sociais ul li:last-child {
      background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  }
  
   .minha-foto:hover .redes-sociais {
    opacity: 1;
  }
  
   .minha-foto:hover .redes-sociais ul li {
      width: 50px;
      height: 50px;
opacity: 1;
  }

<div class="col-md-5 minha-foto offset-md-2 my-auto" style="background-image:url(https://placekitten.com/350/350)">
  <div class="redes-sociais">
        <ul>
          <li><a href="#"><i class="fab fa-linkedin"></i>                </a></li>
          <li><a href="#"><i class="fab fa-facebook-square">               </i></a></li>
          <li><a href="#"><i class="fab fa-instagram"></i>              </a></li>
        </ul>
  </div>
</div>