CODEWITHSUNDEEP
htmlcsscss-transitions
PiotrK
PiotrK

Reputation: 387

CSS transition direction up and down

I'm working on the metro tiles menu for website, I cant use any JavaScript only html and css.

Problem is with sliding tiles and direction of slide, furthermore when box slide next one is hiding under.

#block4 - DOWN
#block5 - UP. 

#block4:hover {
 position: absolute;
  z-index: 2;
  background: rgba(150,150,150,0.95);
  width: 100%;
  height: 50px;
  overflow:hidden;
  transition: height 450ms;
  -moz-transition: height 450ms;
  -webkit-transition: height 450ms;
     height: 300px;
     z-index: 2;
}
#block5:hover {
 position: absolute;
  z-index: 2;
  background: rgba(150,150,150,0.95);
  width: 100%;
  height: 50px;
  overflow:hidden;
  transition: height 450ms;
  -moz-transition: height 450ms;
  -webkit-transition: height 450ms;
     height: 300px;
     z-index: 2;

Example on JSFiddle - https://jsfiddle.net/werk13/7tza9yqq/

Upvotes: 0

Views: 2601

Answers (2)

Lieutenant Dan
Lieutenant Dan

Reputation: 8294

Check this out.

.slider {
    overflow-y: hidden;
    max-height: 500px; /* approximate max height */

    transition-property: all; // this dude
    transition-duration: .5s; // this dude
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1); // this
}

Another Demo.

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
  width: 100px;
  border-radius: 3px;
  padding: 8px 10px;
  color: #FFF;
  line-height:20px;
  font-size:12px;
  text-align:center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease; // right here
}
#toggle + label:after {
  content:"Open" 
}

.container {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); // right here
  padding:5em 3em;
}

Upvotes: 1

Dekel
Dekel

Reputation: 62676

If you want block#3 to float, you must not "change" the other elements around it, since the browser will "reposition" all elements upon any change you made.

Since you said you can't use any JS in the code - there are a few ways I see you can you to handle it: 1. Make the elements fixed position. This way the none of the elements will change when you hover other elements (and change their own style). 2. Use "hidden" elements. Create new element, which is exactly as #block4 - we will call id #block4dup - same content, same position - everything is the same. It will have an absolute position and opacity: 0. the :hover you want will be on #block4dup:hover, and this will change the opacity/height and everything you need. This element will also be positioned absolute, so it will not affect your other floating elements on that page.

Not such a good solution (much duplicate content) but since you can't use any JS here they will both work and give you "good" results.

Upvotes: 1

Related Questions