Ocultar contenido de nuestras entradas

Hoy voy a mostraros como podemos poner en nuestras entradas cajas de texto para ocultar contenido con efecto Hover.

las cajas de tenemos sirve cuando tenemos una entrada muy amplia y tenemos que dividirla en varias seccione.
Esto nos sirve para que nuestros lectores no se aturullen con tanta información, y acaben saliendo de nuestro blog.
Esta caja que mostramos hoy esta hecha solo con código HTML y CSS.
Con el efecto del ratón conseguiremos que se expanda en su totalidad mostrando el texto oculto.

Código

<style type="text/css">

div.expand {

        height: 30px;

        margin: 0px 65px 0px 65px;

        padding: 20px;

        text-align: left;

        overflow: hidden;

        border: 2.5px solid #b0c4de;

        background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCkJemFqCB4b0ovnP6fpQ1Ily-evHilrBiyYbEKAtO9OGIOrEvHPwPkDChXlnQWCJfEq9SOx0Ovm-KV2Hchu5dXsUSY74ExBV_-8_RaYb_jD7OXfn5K7OFkQiQh2C53-FlvpKhzaGzZp3L/s1600/hoja.jpg");

        color: navy;

        font-size: 18px;

        font-family: 'calibri' , sans-serif;

        }

div.expand:hover {

        height: auto;

        margin: 0px 65px 0px 65px;

        padding: 20px;

        text-align: left;

        border: 2.5px solid #b0c4de;

        background-color: white;

        color: navy;

        font-size: 18px;

        font-family: 'calibri' , sans-serif;

        }

</style>

<div class="expand">

<h4 style="text-align: center;">

Texto a mostrar con el contenido oculto.....</h4>

Texto a mostrar expandiendo todo el contenido oculto........

</div>

Texto a mostrar con el contenido oculto.....

Texto a mostrar expandiendo todo el contenido oculto........

Enlace

Datos de https://www.soratemplates.com/