Foros del Web » Creando para Internet » CSS »

Problemas en galeria

Estas en el tema de Problemas en galeria en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/12/2020, 18:08
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 4 años, 9 meses
Puntos: 0
Pregunta Problemas en galeria

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:
Ver original
  1. <!-- Contenedor Upload-->
  2.         <h2>Videos subidos</h2>
  3.         <div class="cont-2">
  4.           <a href="#">
  5.             <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
  6.             <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  7.           </a>
  8.         </div> <!--Fin contenedor-->
  9.         <div class="cont-2">
  10.           <a href="#">
  11.             <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
  12.             <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  13.           </a>
  14.         </div>
  15.         <div class="cont-2">
  16.           <a href="#">
  17.             <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
  18.             <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  19.           </a>
  20.         </div>
  21.         <div class="cont-2">
  22.           <a href="#">
  23.             <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
  24.             <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  25.           </a>
  26.         </div>
  27.         <div class="cont-2">
  28.           <a href="#">
  29.             <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
  30.             <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  31.           </a>
  32.         </div>
  33.         <div class="cont-2">
  34.           <a href="#">
  35.             <img src="https://imagenesdepaisajes.net/wp-content/uploads/2016/08/lago-moraine-canada-1-816x402.jpg" alt="Video Subido" width="600" height="400">
  36.             <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  37.           </a>
  38.         </div>

Código CSS:
Ver original
  1. /* Contenedor upload */
  2. .cont-2 {
  3.   margin: 5px; /**/
  4.   float: left;
  5.   width: 300px;
  6. }
  7.  
  8. .cont-2:hover {
  9.   border: 1px solid #777;
  10.   margin: 0;
  11. }
  12.  
  13. .cont-2 a {
  14.   text-decoration: none;
  15.   color: #fff;
  16. }
  17.  
  18. .cont-2 a:hover {
  19.   color: #777;
  20. }
  21.  
  22. .cont-2 img {
  23.   width: 100%;
  24.   height: auto;
  25. }
  26.  
  27. .desc {
  28.   padding: 15px;
  29.   text-align: center;
  30. }
  31. /* ----- */
  #2 (permalink)  
Antiguo 31/12/2020, 20:44
 
Fecha de Ingreso: agosto-2013
Ubicación: planeta.Tierra
Mensajes: 12
Antigüedad: 7 años, 5 meses
Puntos: 3
Respuesta: Problemas en galeria

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.



La zona horaria es GMT -6. Ahora son las 02:50.