Testo sull’immagine mouseover?

Sto cercando di far apparire una piccola scatola sul lato in basso a sinistra di un’immagine quando un mouse si sposta su di essa. All’interno della scatola ci sarà un link a una pagina diversa.

Qui è un po ‘simile a quello che voglio, ma la scatola deve essere più piccola e non collegata al bordo dell’immagine.

Ho provato tutto e non riesco a trovare una risposta. E non voglio usare tooltip, per non parlare del fatto che non ho alcuna conoscenza di javascript. Voglio davvero che questo sia CSS.

Anche le immagini con cui sto cercando di lavorare possono essere trovate qui.

Questo sta usando il :hover pseudoelementoment in CSS3.

HTML:

 

text

CSS:

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

Demo QUI .


Questo invece è un modo per ottenere lo stesso risultato usando jquery:

HTML:

 

text

CSS:

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

codice jquery:

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

Puoi mettere il codice jquery dove vuoi, nel corpo della pagina HTML, quindi devi includere la libreria jquery nella testa in questo modo:

    

Puoi vedere la demo QUI .

Quando vuoi usarlo sul tuo sito web, basta cambiare il valore e puoi aggiungere più immagini e didascalie, basta copiare il formato che ho usato: inserisci immagine con class="hover" e p con class="text"

Ecco un modo per farlo 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; } 

dimostrazione

O se lo vuoi solo nell’angolo in basso a sinistra:

dimostrazione

Usa :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