Imagen con Texto Oculto

CLIC AQUÍ VISTA PREVIA

PASO a PASO

1. Desde la opción Tema de Blogger, clic en el botón  Personalizar 
2. Clic en Opciones avanzadas y buscamos Agregar CSS.
3. Copia y pega el siguiente código. Clic en  Aplicar al blog 

/* Picture Hidden Text ----------------------------------------------- */ .hiddenbox { background: #3d1555; /*color de fondo*/ float: left; height: 200px; width: 200px; overflow: hidden; position: relative; border-radius: 150px; } .picture { margin: -7px 0 0 -7px; -webkit-transition-property: margin-top; -webkit-transition-duration: .5s; -moz-transition-property: margin-top; -moz-transition-duration: .5s; -o-transition-property: margin-top; -o-transition-duration: .5s; -ms-transition-property: margin-top; -ms-transition-duration: .5s; } .hiddenbox:hover .picture { margin-top: -220px; } .hidetext { margin: 0 0 0 5px; color: #fff; /*color de texto*/ background: #3d1555; /*color de fondo*/ font-size: 90%; /*tamaño de texto*/ text-align: center; height: 200px; width: 200px; } .hidetext p { padding:15px; }

Ahora dejo el código de 3 modelos diferentes de imagen, a las cuales se le pueden modificar el texto y también la imagen misma. Estos códigos se pueden pegar en una ventana HTML desde la opción Diseño.

Códigos:

<div class="hiddenbox"> <div class="picture"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvzmbRZjLpgA3In-9HWirBeNiH-5hZdgps-LwALf5IxpI1eYiYgmL65AxyZRoi2ZY5BkSVwYiWKMl6MPXNs2iTo0TLKTiyxW5Sp-PCnLlaorxHTbCTdFvyhovC4iqFtKq61N-q_pg78K4/s1600/avatar2020-01-bykuma.png" /> <div class="hidetext"> <p> <b>AQUÍ VA TU TEXTO.</b> Ten cuidado de no exceder el número de palabras, pues solo es para mensajes cortos. Por ej.: un mensaje de bienvenida.</p> </div> </div> </div>

<div class="hiddenbox"> <div class="picture"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtolV-sdxbe7cdsjH8JNmHaIbN3ergBcdN3A27VpceBQtBA94J8bMHRKZZ3suRM0sziZQ_-qy9loIwkKT1QRP3sbZ4dQvUaCon0zsgyC_tuSwRj3isR6iBc_Um_IrOFs5SIKuO-aStQEo/s1600/avatar2020-02-bykuma.png" /> <div class="hidetext"> <p> <b>AQUÍ VA TU TEXTO.</b> Ten cuidado de no exceder el número de palabras, pues solo es para mensajes cortos. Por ej.: un mensaje de bienvenida.</p> </div> </div> </div>

<div class="hiddenbox"> <div class="picture"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivW7LMsVHdY76EW-2KnKBhv67Jo7tvkjl4ha7uGPHZBF9i3GVTG_Px9pHvErLcn-f5zr-3Rwe_M090gkHE-fFaaEI_jCX1lQcZ9HlAIcR-lD5RudQ4bfRzhpf57dwi_z2HdbSf6MbOd1U/s1600/avatar2020-03-bykuma.png" /> <div class="hidetext"> <p> <b>AQUÍ VA TU TEXTO.</b> Ten cuidado de no exceder el número de palabras, pues solo es para mensajes cortos. Por ej.: un mensaje de bienvenida.</p> </div> </div> </div>