Search code examples
htmlcsshoveroverlay

How can I animate an overlayed div with :hover? Do I need JS or can it be done in CSS?


What I am trying to achieve: As the mouse scrolls over a color section, that specific color section slides and overlays the other three, revealing more content.

What I tried:

Each time I add a div it affects the previous div because of its parent.

If a div gets added without a parent, the result was that each div animated solo.

Perhaps I am approaching this the wrong way. Do I need javascript to hide each individual div? Whats the best way to achieve this? Thank you

Heres a code pen of what I have so far: https://codepen.io/habsqrd/pen/WNbrNLL

Here is the body:

<div class="center">
    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

body
{
  background-color: #d6d6d6;
  margin: auto;
}

.center {

}

.one {
  position: absolute;
  margin: auto;
  background-color:rgb(94, 226, 94);
  width: 90%;
  height: 90%;
  { transition: all .2s ease-in-out; }

}

.one:hover {
    position: absolute;
    background-color:rgb(6, 179, 6);
    width: 90%;
    height: 90%;
    z-index: 4;
    transition: all .2s ease-in-out;
  }

.two {
    position: absolute;
    background-color:rgb(247, 82, 82);
      width: 75%;
    height: 100%;
    z-index: 1;

  }

.three {
    position: absolute;
    background-color:rgb(86, 86, 255);
    width: 50%;
    height: 100%;
    z-index: 2;
  } 


.four {
  position: absolute;
  background-color:rgb(240, 240, 96);
  width: 25%;
  height: 100%;
  z-index: 3;
}

Solution

  • im hope i understand you correctly:

    https://codepen.io/shahry4r/pen/yLyeyGV

    <!DOCTYPE html>
    <html lang="en">
    
     <link rel="stylesheet" type="text/css" href="styles.css">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
        <div class="center">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div> 
          <div class="four"></div>
        </div>
    
    
    </body>
    </html>
    
    CSS
    
    body
    {
      background-color: #d6d6d6;
      margin: auto;
    }
    
    .center {
    
    }
    
    .one {
      display: inline-block;
      background-color:rgb(94, 226, 94);
      width: 25%;
      height: 100%;
      position: absolute;
      left:auto;  
      { transition: all .2s ease-in-out; }
    
    }
    
    .one:hover {
        position: absolute;
        background-color:rgb(6, 179, 6);
        width: 100%;
        z-index: 4;
        transition: all .2s ease-in-out;
      }
    
    .two {
          display: inline-block;
          background-color:rgb(247, 82, 82);
          width: 25%;
          height: 100%;
          position: absolute;
          left:25%;  
          z-index: 1;
    
      }
    
    .two:hover {
        position: absolute;
        background-color:rgb(247, 82, 82);
        width: 100%;
        z-index: 4;
        left:0%;
        transition: all .2s ease-in-out;
      }
    
    
    .three {
      display: inline-block;
      background-color:rgb(86, 86, 255);
      width: 25%;
      height: 100%;
      position: absolute;
      left:50%;
    } 
    
    
    .four {
      display: inline-block;
      background-color:rgb(240, 240, 96);
      width: 24%;
      height: 100%;
      left: 75%;  
      position: absolute;
    }