pero - menu transparente css

Desvaneciendo el texto en la parte inferior de una sección con div transparente, pero la altura permanece debajo de la sección después de superponer div

Question

Estoy tratando de obtener un buen efecto de desvanecimiento en la parte inferior de una sección del texto como un indicador de "leer más".

He estado siguiendo un poco this y otros tutoriales, y mi código actualmente es el siguiente:

html

<section>
    <p>malesuada fames ac turpis egestas...leo.</p>                                                                  
    <p>malesuada fames ac turpis egestas...leo.</p>
    <div class="fadeout"></div>
</section>
<p>Stuff after</p>

css

.fadeout {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
} 

jsFiddle

El problema es que, incluso cuando coloco el div transparente sobre el cuerpo del texto, los 4em''s de espacio todavía existen entre y "Otras cosas".

¿Algunas ideas?

Answer 1

Llegó tarde a la fiesta, pero esto también se puede hacer sin el div .fadeout , usando un ::before o ::after pseudo-elemento:

        section {
            position: relative;
        }

        section::after {
            content: '''';
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 15px;
            background: -webkit-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -moz-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -o-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -ms-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
        }

Answer 2

Simplemente agregue .fade-out sobre el elemento que desea "desaparecer":

.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% );
}

Answer 3

Simplemente reemplace la bottom: 4em con margin-top: -4em . Funciona perfecto para mi.

Answer 4

Un elemento de posición relativa no se elimina del flujo de html normal, por lo que si lo mueve alrededor del espacio inicial reservado, aún permanece, sin embargo, con el posicionamiento absoluto no es el caso

.fadeout {
    position: absolute; 
    bottom: 0em;
    width:100%;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
} 
section {position:relative}     

DEMO