Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div

Question

I\'m trying to get a nice fade-out effect at the bottom of a section of text as a \'read more\' indicator.

I\'ve been following a bit off this and other tutorials,

Answer 1

Simple add .fade-out onto the element you want to "fade-out":

.fade-out {
  position: relative;
  max-height: 350px; // change the height
}
.fade-out:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient( rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100% );
}