How to prevent Hover from changing other Ivs?

Asked

Viewed 21 times

0

My Hover makes the div increase in width and height but this ends up making the other Ivs around move away because of the space on the page. I tried to modify the others by activating the Hover of each one, kind of to balance everything but I could not.

<body>
<header>
    <h1>Memory Game</h1>
    <h2>Click on the "SPREAD" button to start.</h2>
</header>
<main>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div><br>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div><br>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div><br>
</main>

CSS:

main {
height: 800px;
text-align: center;
padding: 0;
margin: 0;

}

.card {
display: inline-block;
margin: 10px;
height: 184.2px;
width: 280px;
background: rgba(69, 5, 153, 0.884);
cursor: pointer;

}

.card:hover {
border-style: solid;
border-color: rgb(226, 241, 237);
height: 194.2px;
width: 290px;

}

div hover

1 answer

1


It is necessary to maintain the original positioning of each card, even with the Hover. For this I created the child in the example, he who is affected by the effect of size.

main {
height: 800px;
text-align: center;
padding: 0;
margin: 0;
}

.card {
display: inline-block;
margin: 10px;
height: 184.2px;
width: 280px;
background: rgba(69, 5, 153, 0.884);
cursor: pointer;
}
.filho {
  background: red;
  width: 100%;
  height: 100%;
  transition: 1s;
}
.filho:hover {
  transform: scale(1.1);
  transition: 1s;
}
<body>
<header>
    <h1>Memory Game</h1>
    <h2>Click on the "SPREAD" button to start.</h2>
</header>
<main>
    <div class="card">
      <div class="filho"></div> 
    </div>
    <div class="card">
      <div class="filho"></div> 
    </div>
    <div class="card"></div>
    <div class="card"></div><br>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div><br>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div><br>
</main>

Browser other questions tagged div hover

You are not signed in. Login or sign up in order to post.