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/AVvXsEileZ_0SCz3Puurx3FC5ibV2UXWbtWTY53D4u1O1KQWRjh9RqEdMEZlmjzNczKYlDDTsyZ5zbLRn_hg6zqSZrVKj8dhpYO7htRD7GC29zONqeQram1EfbRrfm0na2UDaRcYT7ITVp92ZVhB/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/