Texto sobre la imagen mouseover?

Intento que aparezca una pequeña caja en el lado inferior izquierdo de una imagen cuando el mouse se mueve sobre ella. Dentro del cuadro habrá un enlace a una página diferente.

Aquí es algo similar a lo que quiero, pero la caja es más pequeña y no está conectada al borde de la imagen.

Lo intenté todo y no puedo encontrar una respuesta. Y no quiero usar la información sobre herramientas, y menos el hecho de que no tengo ningún conocimiento de javascript. Realmente quiero que esto sea CSS.

También las imágenes con las que trato de trabajar se pueden encontrar aquí mismo.

Esto está usando el :hover desplazamiento en CSS3.

HTML:

 

text

CSS:

 #wrapper .text { position:relative; bottom:30px; left:0px; visibility:hidden; } #wrapper:hover .text { visibility:visible; } 

Demostración AQUÍ .


En su lugar, esta es una forma de lograr el mismo resultado utilizando jquery:

HTML:

 

text

CSS:

 #wrapper p { position:relative; bottom:30px; left:0px; visibility:hidden; } 

código jquery:

 $('.hover').mouseover(function() { $('.text').css("visibility","visible"); }); $('.hover').mouseout(function() { $('.text').css("visibility","hidden"); }); 

Puedes poner el código jquery donde quieras, en el cuerpo de la página HTML, luego debes incluir la biblioteca jquery en el encabezado así:

    

Puedes ver la demostración AQUÍ .

Cuando quiera usarlo en su sitio web, simplemente cambie el valor y puede agregar varias imágenes y subtítulos, simplemente copie el formato que usé: inserte la imagen con class="hover" yp con class="text"

Aquí hay una manera de hacer esto usando css

HTML

  

CSS

 .imageWrapper { position: relative; width: 300px; height: 300px; } .imageWrapper img { display: block; } .imageWrapper .cornerLink { opacity: 0; position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 2px 0px; color: #ffffff; background: #000000; text-decoration: none; text-align: center; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; } .imageWrapper:hover .cornerLink { opacity: 0.8; } 

Manifestación

O si solo lo quieres en la esquina inferior izquierda:

Manifestación

Uso :hover::before pseudooclass

 .round-pic2:hover::before{ content: 'text'; position: relative; top: 60px; left: 50px; width: 30px; height: 20px; text-align: center; display: inline-block; } 

JSFiddle