How to color part about descending line?

Question

I have a simple div that goes down when hovered over. As the line goes down I want all the part of the page above the line to be colored with any color but I can't figure out how.

It can be only with HTML & CSS.

.a1:hover {
  transform: translateY(96vh);
}

.a1 {
  top: 20px;
  height: 20px;
  position: relative;
  transition: all 4s;
  background-color: #0000ff;
}

<div class="a1"></div>

score 0 · Answer 1 · answered Mar 31 '20 at 18:24

you have to increase the height instead of translate transform...

change your css to this:

.a1:hover {
  height: 96vh;
}
.a1 {
  top: 20px;
  height: 20px;
  position: relative;
  transition: all 2s ease-in;
  background-color: #0000ff;
}

codepen example

Nyx · Answer 2 · 2020-03-31T18:41:24.600

This is a way to do it (written by following this answer)

.a1:hover{
    transform: translateY(96vh);
}
.a1{
 top:20px;
 height: 20px; 
 position : relative; 
 transition: all 4s;
 background-color:#0000ff; 
}
.a2{
width:100%;
height:0vh;
transition: height 4s;
}
.a1:hover + .a2{
 background-color:#000;
 height:96vh;
}
.a2:hover{
background-color:#000;
height:0vh;
}

<!doctype html> 
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="Lab2.css">
        <title>Lab2b</title>
    </head>
    <body>
    <div class="a1"></div>
    <div class="a2"></div>
    </body>
</html>

How to color part about descending line?

2 Answers2