transition where division expands on hover is not working for the division on the right

Question

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.

Is it a typo using `vh` unit on `width` in `.grow:hover` class? — Ferris, May 15 '23 at 22:40
I did use percentage but then I experimented with using ```vh``` instead — Abdullah Shekfeh, May 16 '23 at 05:12
using `float: left` it will wrap when it doesn't fit in the parent width. — Garr Godfrey, May 16 '23 at 05:26

score 2 · Answer 1 · answered May 16 '23 at 05:34

Is this what you're after? I added a container and the glitch has gone.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        display: flex;
      }
      .container 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;
      }

      .grow:hover {
        width: 90vw;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="home grow">
        <a routerLink="">HOME</a>
      </div>
      <div class="books grow">BOOKS</div>
      <div class="about grow">ABOUT</div>
    </div>
  </body>
</html>

score 1 · Answer 2 · answered May 16 '23 at 05:30

Try this, using "flex" instead of "float"

    * {
        margin: 0;
        padding: 0;
    }
    
    div.container {
       display: flex;
       flex-flow: row nowrap;
    }

    div.grow {
        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;
    }

<div class="container">
<div class="home grow">
  <a routerLink = "">HOME</a>
</div>
<div class="books grow">
  BOOKS
</div>
<div class="about grow">ABOUT</div>
</div>

transition where division expands on hover is not working for the division on the right

2 Answers2