hover transitions

by Soviut

HTML

<div class="container">
  <div class="inner">
    inner element inner element inner element inner element inner element inner element inner element
  </div>
</div>

CSS

.container {
  position: relative;
  width: 180px;
  height: 180px;

  overflow: hidden;
  background: white;
}

.container:hover .inner {
  transform: translateY(0);
}

.inner {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 10px;
  bottom: 0;

  overflow: hidden;
  background: blue;
  transform: translateY(50%);
  transition: transform 100ms linear;
}