CSS переходное направление вверх и вниз

Question

Я работаю над меню плиток метро для веб-сайта, я не могу использовать JavaScript только HTML и CSS.

Проблема заключается в скольжении плиток и направлении скольжения, кроме того, когда скрывается следующий слайд коробки.

# block4 - ВНИЗ
#block5 - ВВЕРХ.

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

Пример на JSFiddle - https://jsfiddle.net/werk13/7tza9yqq/

Answer 1

Проверьте это.

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

Еще одна демка.

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

Answer 2

Если вы хотите, чтобы блок № 3 плавал, вы не должны "изменять" другие элементы вокруг него, так как браузер будет "переставлять" все элементы после каждого внесенного вами изменения.

Поскольку вы сказали, что вы не можете использовать JS в коде - я вижу, что вы можете справиться с этим несколькими способами: 1. Установите элементы в фиксированное положение. Таким образом, ни один из элементов не изменится, когда вы наведете курсор на другие элементы (и измените их собственный стиль). 2. Используйте "скрытые" элементы. Создайте новый элемент, который будет точно таким же как #block4 - мы назовем id #block4dup - тот же контент, та же позиция - все то же самое. Он будет иметь абсолютную позицию и непрозрачность: 0. нужный:hover будет на #block4dup:hover, и это изменит непрозрачность / высоту и все, что вам нужно. Этот элемент также будет позиционироваться как абсолютный, поэтому он не повлияет на другие ваши плавающие элементы на этой странице.

Не очень хорошее решение (много дублирующегося контента), но поскольку вы не можете использовать JS, они оба будут работать и давать вам "хорошие" результаты.