Home Div slide up with pure css
Reply: 0

Div slide up with pure css

user4445
1#
user4445 Published in May 27, 2018, 3:36 am

Is it possible with pure css to have the control overlay div slide up from the bottom once the arrow is clicked? I have a max height of 119px; so the overlay stops right below the numbers. I have added a transition and a .close property but I cant seem to toggle it to the arrow div. Can anyone give suggestions? Thanks.

html, body { 
  height: 100%;
  width: 100%; margin: 0; padding: 0; background: pink;  /* fallback for old browsers */
  background-color:black;}

.music-container {
  width:555px;
  height:400px;
  background-color:white;
  border: 1px solid white;
  border-radius:5px;
  box-shadow: 0px 15px 54px -12px rgba(94,97,120,1);
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;}


.playing-now {
  width:180px;
  height:175px;
  border: 1px solid transparent;
  border-radius:5px;
  background-size:cover;
  position: absolute;
  top:0;
  bottom: 130px;
  left: 0;
  right: 0;
  margin: auto;}

.playing-now:hover {
  transform:scale(1.01);
  cursor:pointer;}

.current-time {
  position: absolute;
  top:120px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;}

.music-bar {
  padding: 0 3rem;}

progress {
  border: 0;
  color: #ED5483;
  height: 5px;
  width: 45%;
  -webkit-appearance: none;}

progress::-webkit-progress-value {
  background: #7f7f7f; 
  border-radius: 10px;}

progress::-webkit-progress-bar {
  height: 2.7px;
  background: #d8d8d8;
  border-radius: 10px;}

.progress-dot {
  width:4.5px;
  height:4.5px;
  border: 1px solid #7f7f7f;
  background-color:#7f7f7f;
  border-radius:50%;
  position: absolute;
  top:0;
  bottom: -117.5px;
  left: 0;
  right: 165px;
  margin: auto;}

.playing-bar:hover {
  cursor:pointer;}

.time {
  margin-top:265px;
  font-family:Helvetica, sans-serif;
  font-size:13px;
  color:#7f7f7f;}

.time-left {
  float:left; margin-left:138px;}

.time-right {
  float:right; margin-right:138px;}

.song-name {
  position: absolute;
  text-align:center;
  top:305px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  font-weight:bold;
  font-family:Helvetica, sans-serif;}

.artist {
  position: absolute;
  text-align:center;
  top:330px;
  bottom: 0;
  left: 0;
  color:red;
  right: 0;
  margin: auto;
  font-family:Helvetica, sans-serif;}

.arrow {
  transform: scale(0.9);
  position: absolute;
  top: 375px;
  bottom: 0;
  left: 0;
  width:55px;
  right: 0;
  margin: auto;}

.arrow:hover {
  cursor:pointer;
  transform: scale(1);
  left:2px;}

.left-side-arrow {  
  transform: rotate(-19deg);
  width:15px;
  height:3px;
  background-color:#d8d8d8;
  border:2px;
  border-radius:7px;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0px;
  right: 12px;
  margin: auto;}

.right-side-arrow {  
  transform: rotate(-340deg);
  width:15px;
  height:3px;
  background-color:#d8d8d8;
  border:2px;
  border-radius:7px;
  position: absolute;
  top:0.5px;
  bottom: 0;
  left: 13.5px;
  right: 0;
  margin: auto;}

.control-overlay {
  width:550px;
  max-height:119px;
  background-color:rgba(0,255,255,0.5);
  overflow-y: hidden;
  transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  border: 1px solid transparent;
  border-radius:5px;
  position:absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;}

.control-overlay.closed {
  max-height: 0;}
<div class="music-container">
  <div class="playing-now"></div>
  <div class="playing-time">
    <div class="time">
      <span class="time-left">0:24</span>
      <span class="time-right">-2:19</span>
    </div>
  </div>
  <div class="arrow">
    <div class="left-side-arrow"></div>
    <div class="right-side-arrow"></div>
  </div>
  <div class="control-overlay">
    
    <p>controls here</p>
    <br/>
    <p>controls here</p>
    
  </div>
</div>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.318142 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO