Básicamente, mi amigo y yo estamos trabajando en un sitio web de revisión de juegos. Hay un menú donde seleccionas el juego sobre el que quieres leer.
Nuestro problema es que los juegos se mueven cuando cambiamos el tamaño de una imagen (icono del juego) al lado. ¿Cómo podríamos evitar que se mueva?
Aquí está nuestro código:
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="style.css" rel="stylesheet" type="text/css" /> <title> Just a game review thing </title> </head> <body> <h1>Doesn't have a name yet</h1> <div class="gameLinks"> <a><img src="images/Sea_of_Thieves.png" alt="Sea of Thieves" class="gameLinkImg"></a> <a><img src="images/Sea_of_Thieves.png" alt="Sea of Thieves" class="gameLinkImg"></a> </div> <script src="script.js"></script> </body> </html>CSS:
* { margin: 0; padding: 0; } body { background-color: #1a202f; } @font-face { font-family: Bungee; src: url("fonts/Bungee-Regular.ttf"); } h1 { color: whitesmoke; font-family: Bungee, cursive; text-align: center; font-size: 80px; } .gameLinks { margin: 0 200px; } .gameLinkImg { transition: 0.3s ease-in-out; width: 10%; } .gameLinkImg:hover { transition: 0.3s ease-in-out; box-shadow: 8px 8px 30px; width: 12%; }En lugar de alterar una dimensión, podría usar una función de escala. Esto no alterará el posicionamiento de otros elementos.
Depende de si solo desea escalar el ancho o si desea que toda la imagen se haga un poco más grande en cuanto a qué función de escala usar. Este fragmento solo hace que la imagen se agrande por un factor de 12/10.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="style.css" rel="stylesheet" type="text/css" /> <title> Just a game review thing </title> <style> * { margin: 0; padding: 0; } body { background-color: #1a202f; } @font-face { font-family: Bungee; src: url("fonts/Bungee-Regular.ttf"); } h1 { color: whitesmoke; font-family: Bungee, cursive; text-align: center; font-size: 80px; } .gameLinks { margin: 0 200px; } .gameLinkImg { transition: 0.3s ease-in-out; width: 10%; } .gameLinkImg:hover { transition: 0.3s ease-in-out; box-shadow: 8px 8px 30px; transform: scale(calc(12 / 10)); } </style> </head> <body> <h1>Doesn't have a name yet</h1> <div class="gameLinks"> <a><img src="https://picsum.photos/id/1015/200/300" alt="Sea of Thieves" class="gameLinkImg"></a> <a><img src="https://picsum.photos/id/1016/200/300" alt="Sea of Thieves" class="gameLinkImg"></a> </div> <div class="gameLinks"> <a><img src="https://picsum.photos/id/1015/200/300" alt="Sea of Thieves" class="gameLinkImg"></a> <a><img src="https://picsum.photos/id/1016/200/300" alt="Sea of Thieves" class="gameLinkImg"></a> </div> <script src="script.js"></script> </body> </html>