Contenido desplegable

Contenido desplegable

Y un efecto hover común, pero nada mal!

En ocasiones solamente deseamos expresar con una imagen el significado del contenido de nuestra web. Pero; (¿Qué haríamos sin el "pero;"?) en situaciones, deseamos que la imagen tenga un contenido, y nos vemos obligados a crear el contenido en una pagina nueva sin más opción. No es hasta entonces cuando se viene a mi mente mostrar contenido al hacer clic y lo comparto con ustedes. No es algo novedoso. ¡Para nada!; a continuación spoilers con imágenes utilizando solo html y css.

Demostración


Un buen titulo acá!

No soy un titulo pero describo más

No argument here. If rubbin' frozen dirt in your crotch is wrong, hey I don't wanna be right. Ugh, it's filthy! Why not create a National Endowment for Strip Clubs while we're at it? That's a popular name today. Little "e", big "B"?


Códigos

Es bastante sencillo de usar. Copia el código CSS y pégalo en: Diseño → Mostrar configuración Avanzada → CSS-Code sin Style Tags


input[id^="spoiler"] {
    display: none;
}
input[id^="spoiler"]+label {
    display: block;
    width: auto;
    margin: 0 auto;
    cursor: pointer;
}
input[id^="spoiler"]:checked+label {
    color: #333;
}
input[id^="spoiler"]~.spoiler {
    width: auto;
    height: 0;
    overflow: hidden;
    opacity: 0;
}
input[id^="spoiler"]:checked+label+.spoiler {
    height: auto;
    opacity: 1;
    transition-duration: 1s;
}
figure {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
figure figcaption {
    background: #000;
    color: #FFF;
    padding: 10px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    opacity: 0;
    transition-duration: 0.5s;
    text-align: center;
}

figure:hover>figcaption {
    background: #000;
    color: #FFF;
    padding: 10px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    opacity: 0.8;
    transition-duration: 0.5s;
}



Y el html donde desees que aparezca el contenido oculto o desplegable


<input type="checkbox" id="spoiler1"></input>
<label for="spoiler1">
    <figure style="width:720px; height:200px;">
        <img src="https://fakeimg.pl/720x200/?text=Haz clic aqui&font=ff-dagny-web-pro">
        <figcaption>
            Titulo de la imagen
        </figcaption>
    </figure>

</label>
<div class="spoiler">
    <h1>Un buen titulo acá!</h1>
    <h3>No soy un titulo pero describo más</h3>
    <p>No argument here. If rubbin' frozen dirt in your crotch is wrong, hey I don't wanna be right. Ugh, it's filthy! Why not create a National Endowment for Strip Clubs while we're at it? That's a popular name today. Little "e", big "B"?</p>
</div>


La imagen puede ser de cualquier tamaño, pero para no deformar la estructura, deberás cambiar las proporciones que establecí en el html: width:720px; height:200px; por las dimensiones de la imagen que colocarás.
También cabe destacar que será necesario cambiar el nombre: spoiler1 por cualquier otro cada vez que repitas el código. Esto es todo hasta ahora, Si te gustó, apóyanos con un like


Posted by Gabriel Navarro | Códigos | Imágenes, cortesía de: Marc Mueller


comments powered by Disqus