Problemas en galeria

[saulrayados]

Buenas tardes, el problema que tengo es que cuando paso el mouse sobre el tercer contenedor, los 2 div del siguiente renglón se recorren hasta abajo, como puedo solucionar eso?, ya intente poner un margin: 0; en el hover pero no se corrigió completo

Código HTML:

<!-- Contenedor Upload-->
        <h2>Videos subidos</h2>
        <div class="cont-2">
          <a href="#">
            <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
            <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
          </a>
        </div> <!--Fin contenedor-->
        <div class="cont-2">
          <a href="#">
            <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
            <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
          </a>
        </div>
        <div class="cont-2">
          <a href="#">
            <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
            <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
          </a>
        </div>
        <div class="cont-2">
          <a href="#">
            <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
            <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
          </a>
        </div>
        <div class="cont-2">
          <a href="#">
            <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
            <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
          </a>
        </div>
        <div class="cont-2">
          <a href="#">
            <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
            <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
          </a>
        </div>
 

Código CSS:

/* Contenedor upload */
.cont-2 {
  margin: 5px; /**/
  float: left;
  width: 300px;
}
 
.cont-2:hover {
  border: 1px solid #777;
  margin: 0;
}
 
.cont-2 a {
  text-decoration: none;
  color: #fff;
}
 
.cont-2 a:hover {
  color: #777;
}
 
.cont-2 img {
  width: 100%;
  height: auto;
}
 
.desc {
  padding: 15px;
  text-align: center;
}
/* ----- */
 

[vadtar]

Como no se el layout que tienes en mente .. pero así de forma básica/inicial metería todo en un contenedor div/secction/article (eso depende del contenido) y le aplicaría un display Grid (o Flexbox) dependiendo del layout y los soportes visualización (@media)
..y así podrás jugar con ellos libremente.