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;
}
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;
}