Efecto hover en una imagen que muestra texto oculto

Si quieres saber cómo se hace el efecto hover en una imagen que al pasar el cursor aparezca texto, entonces, esta publicación es para tí. Sigue leyendo y aprenderás de manera rápida y fácil, pues la redacción está pensada para todo usuario, especialmente, principiantes.

Para logralo, se usa css, eso sin duda, pero dentro del HTML

En el caso de que el estilo de esa imagen se llame ".foto" el hover será ".foto:hover"

Vamos a crear dos contenedores: El contenedor padre con la clase ".foto" dentro del cual se aloja otro contenedor que para nuestros efectos llamaremos ".info"

Dicho contenedor ".info" tendrá el mensaje a descubrirse al posar el ratón sobre la imagen.

Para reducir el efecto violento de cambio que produce el hover, se le agrega un trasition de 3s.

Vamos con un ejemplo, que permita ver el procedimiento.

El HTML a usar es el siguiente:

<div class="foto"><div class="info">TEXTO A MOSTRAR </div></div> </p>

El CSS a usar es el siguiente:

   
<style>
.foto{margin-left:auto; margin-right:auto; width:400px; height:400px; border-radius:400px; background-image:url(imagendefondo);border:10px solid #fff;}
 
.info{width:360px; height:300px; border-radius:600px; background-color:#336699; padding-top:100px; padding-left:20px; padding-right:20px; opacity:0; font-family: 'Leckerli One', cursive; color:#FFF; font-size:20px; text-align:center;}
  
.info:hover{opacity:.9;} 
     
     </style>

El resultado es el siguiente:

TEXTO A MOSTRAR

Saludos y por visitar y leer este blog.