CODEWITHSUNDEEP
csshover
DerGeizige
DerGeizige

Reputation: 1

box changeing size when hovering

So, i`m trying to make a box to expand a bit in all 4 directions when hovering over it. But for now it only expands to the right and bottom.

Thats what i have tried for now:

.boydiv:hover{
width: 150px;
height: 250px;
background-color: #436eb1;

.boydiv{
width: 120px;
position: fixed;
top: 300px;
left: 150px;
border: solid;
border-color: black;
border-radius: 12px;
margin: 5px;
padding: 5px;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
animation-name: boydiv;
animation-duration: 0s;

Upvotes: 0

Views: 1124

Answers (2)

dult.np
dult.np

Reputation: 65

On the :hover state you do not change the top and left position. Therefore the top left corner of the element will grow in the other direction.

What you can do is either use flex-box (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) or a simpler solution is to position the object at its center position and then use "transform: translate(-50%, -50%)" to recenter it. So:

.boydiv {
    position: fixed;
    top: 410px;
    left: 210px;
    width: 120px;
    height: 220px;
    transform: translate(-50%, -50%);
}
.boydiv:hover {
    width: 150px;
    height: 250px;
}

Upvotes: 1

Alberto Rhuertas
Alberto Rhuertas

Reputation: 773

There are many ways to do that. You can use a flex container like this, for example:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.boydiv:hover{
width: 200px;
height: 180px;
background-color: #436eb1;
}

.boydiv{
width: 120px;
height: 100px;
border: solid;
border-color: black;
border-radius: 12px;
margin: 5px;
padding: 5px;
transition: all .2s linear;
 cursor: pointer;
}
<div class="boydiv"></div>

Upvotes: 0

Related Questions