skip to Main Content

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


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search