Basically, me and my friend are working on a game review website. There is a menu where you select the game you want to read about.
Our problem is that the games move when we resize an image (game icon) next to it. How could we stop it from moving?
Here is our code:
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%;
}
Instead of altering a dimension you could use a scaling function. This will not alter the positioning of other elements.
It depends on whether you want to just scale the width or whether you want the whole image to get a bit bigger as to which scaling function to use. This snippet just makes the image get bigger by a factor of 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>