Overclip text on hover

index.pug

.wrapper
  a.mouseover-me.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Nunc vehicula dapibus sem eget maximus. Nunc vehicula dapibus sem eget maximus.
  h1.override-me HOVER ABOVE PARAGRAPH TO HIDE THIS TEXT PARTIALLY, BUT KEEP THIS H1 TEXT IN THE SAME POSITION

overclip-text-on-hover.markdown

Overclip text on hover

A Pen by Vincent Tang on CodePen.

License.

style.scss

* {
  margin: 0;
  box-sizing: border-box;
}
.wrapper {
  margin: 50px;
  width: 200px;
  position: relative; /* So position absolute stays in this box */
}
.mouseover-me {
  display: block; /* <a> tag has no defaults */
  height: 55px;
  position: absolute;
  max-height: 55px;
  overflow-y: hidden;
  z-index: 20;
}
.mouseover-me:hover{
  background-color: lightgrey;
  z-index: 20;
  max-height: none;
  height: auto;
}
.override-me { padding-top: 55px; }