I am trying to make a transition where the division expands once you hover over it, but it is not working for the division on the far right and it just glitches out in a weird way when I hover over it.
here’s the HTML:
<div class="home grow">
<a routerLink = "">HOME</a>
</div>
<div class="books grow">
BOOKS
</div>
<div class="about grow">ABOUT</div>
and here’s the CSS:
* {
margin: 0;
padding: 0;
}
div {
float: left;
width: 33.33%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.home {
background-color: grey;
}
.books {
background-color: lightblue;
}
.about {
background-color: lightcyan;
}
.grow {
-webkit-transition: width 0.5s;
transition: width 0.5s;
overflow: hidden;
transition: 1.5s;
}
.grow:hover {
width: 90vw;
}
And one other issue I’m having is the division on the right completely disappearing when I expand the on of the other divisions
I tried making a special transition for the element on the right by doing the following
HTML:
<!-- modified the "About" division -->
<div class= "about grow-right">about</div>
CSS:
/* just added a random negative value the the margin to check if it works */
.grow-right:hover {
margin-left: -80px;
}
but it didn’t work and it just left a white space on the right when I hovered over it.
2
Answers
Try this, using "flex" instead of "float"
Is this what you’re after? I added a container and the glitch has gone.