Unveiling content on hovering with a sliding-up effect?

user_4357087 0
Viewed 55

I'm trying to make a panel shown or hidden by sliding in from all directions, and meanwhile showing or hiding another panel which is fixed in position, which is what I meant "unveiling" in the title. Here's the demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        .parent-panel {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: 10px;
            position: relative;
        }

        .child-panel {
            background-color: yellow;
            position: absolute;
            transition: all 0.5s ease;
            overflow: hidden;
        }

        .content {
            width: 50px;
            height: 100px;
            background-color: blue;
            margin: 40px auto;
        }

        #slide-down .child-panel {
            width: 100%;
            height: 0;
            bottom: 100%;
        }

        #slide-down:hover .child-panel {
            height: 100%;
            bottom: 0;
        }

        #slide-up .child-panel {
            width: 100%;
            height: 0;
            bottom: 0;
        }

        #slide-up:hover .child-panel {
            height: 100%;

        }

        #slide-right .child-panel {
            width: 0;
            height: 100%;
            right: 100%;
        }

        #slide-right:hover .child-panel {
            width: 100%;
            right: 0;
        }

        #slide-left .child-panel {
            width: 0;
            height: 100%;
            left: 100%;
        }

        #slide-left:hover .child-panel {
            width: 100%;
            left: 0;
        }
    </style>
</head>
<body>
<div id="slide-down" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
<div id="slide-up" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
<div id="slide-right" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
<div id="slide-left" class="parent-panel">
    <div class="child-panel">
        <div class="content"></div>
    </div>
</div>
</body>
</html>

I want all panels to show or hide their blue square as if it's fixed in position before or after hovering just like the first panel. The solution should surround the margin of the content 

.content {
    margin: 40px auto;
}

We should have the content's margin calculated relative to the parent-panel instead of the child-panel. For example, for the sliding-up panel the content's vertical margin should be calculated relative the parent-panel's top border. But I don't know exactly how and couldn't find an answer either after quite some researching.

css html
1 Answers

I would consdier an overlay above the element that I animate instead:

.parent-panel {
  width: 200px;
  height: 200px;
  background-color: purple;
  margin-top: 10px;
  position: relative;
  z-index:0;
}
.parent-panel::before {
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  transition: all 0.5s ease;
}

.child-panel {
  background-color: yellow;
  overflow:hidden;
}

.content {
  width: 50px;
  height: 100px;
  background-color: blue;
  margin: 50px auto;
}

#slide-down:hover::before {
  bottom: 100%;
}
#slide-up:hover::before {
  top:100%;
}

#slide-right:hover::before {
  left:100%;
}

#slide-left:hover::before {
  right:100%;
}
<div id="slide-down" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-up" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-right" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-left" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>

You can also consider translation to achieve a similar effect:

.parent-panel {
  width: 200px;
  height: 200px;
  background-color: purple;
  margin-top: 10px;
  position: relative;
  z-index:0;
  overflow:hidden;
}

.child-panel {
  background-color: yellow;
  overflow:hidden;
  transition:1s all;
}

.content {
  width: 50px;
  height: 100px;
  background-color: blue;
  margin: 50px auto;
}
#slide-down .child-panel {
  transform:translateY(-100%);
}
#slide-up .child-panel {
  transform:translateY(100%);
}
#slide-right .child-panel {
  transform:translateX(-100%);
}
#slide-left .child-panel {
  transform:translateX(100%);
}
#slide-down:hover .child-panel,
#slide-up:hover .child-panel,
#slide-left:hover .child-panel,
#slide-right:hover .child-panel{
  transform:translate(0);
}
<div id="slide-down" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-up" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-right" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>
<div id="slide-left" class="parent-panel">
  <div class="child-panel">
    <div class="content"></div>
  </div>
</div>

user_86203330
Related