Estoy intentando crear una galería ý resulta que cada vez que intento pasar el mouse para ver el efecto hover, pues las demas imagenes como que se mueven. Afecta un poco a las demás imágenes.
Acá os dejo mi html
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Galería</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="galeria">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
<img src="img/7.jpg" alt="" />
<img src="img/8.jpg" alt="" />
</div>
</body>
</html>
y este es mi css:
* {
padding: 0;
margin: 0;
}
body {
background: #000500;
}
.galeria {
width: 100%;
}
.galeria img {
vertical-align: top;
width: 230px;
margin: 20px;
padding: 5px;
display: inline-block;
border: 1px solid #484848;
opacity: .5;
}
.galeria img:hover {
opacity: 1;
border: 2px solid #fff;
}
No se si tiene que ver con el tamaño de mi pantalla. Tengo una laptop hp, o si tiene que ver conn alguna propiedad en específico o la forma en que uso los selectores.
galeria img
tienesborder: 1px
, pero en la clasegaleria img:hover
tienesborder: 2px
, pon los 2 bordes con igual valor y se resuelve. – the-breaker el 23 jul. 19 a las 2:27