Testo al passaggio del mouse sopra immagine

[Simonpen2001]

Buongiorno a tutti,

sono nuovo del forum.

Anzitutto volevo ringraziarvi per tutti gli aiuti che ho trovato leggendo sulle vostre pagine! Siete davvero dei grandi!

Ho iniziato da pochissimo a seguire dei tutorial per realizzare un sito web amatoriale di fotografia. In particolare sto cercando di modificare lo schema base (trovato qui:http://tympanus.net/codrops/2010/07/...ation-gallery/) alle mie esigenze.

Sono riuscito a sistemare quasi tutto tranne una cosa.

Al passaggio del mouse sopra le foto, oltre all'effetto trasparenza, vorrei che apparisse un testo sopra l'immagine stessa come una piccola descrizione.

Il mio problema è che riesco a far comparire il testo ma questo compare sempre sulla prima immagine, mentre io vorrei comparisse sulla magine dove ho il mouse.

Spero di essermi spiegato...



ah questo è il codice:

.st_thumbs > a{
display block;
}
.st_thumbs > a > span{
display: block;
position: absolute;
margin-left:auto;
color:#fff;
font-size: 20px;
bottom: -20px;
left: 5px;
text-shadow: 5px 1px 1px rgba(0,0,0,0.4);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.st_thumbs a:hover > span{
display: block;
text-align: left;
left: 5px;
bottom: 110px;
}
.st_thumbs{
height:166px;
margin: 0;
position: relative;
}
.st_thumbs img{
border: 0;
float:left;
margin:3px 3px 0px 0px;
cursorointer;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
opacity:0.85;
filterrogidXImageTransform.Microsoft.Alpha(opacity=85);
}

[mangusta91]

Ciao

prima che qualche cattivo moderatore ti rimproveri (sto scherzando eh ) ti consiglio di inserire fra i tag [ CODE ] e [ / CODE ] (ovviamente senza spazi) il codice che posti..

Per quanto riguarda il tuo problema ci sono due modi per risolverlo:

-Se non ti interessa l'effetto grafico, basta aggiungere l'attributo title="descrizione della foto" ad ogni tua <img>, ad esempio :

 [img]./img/foto1.png[/img]

in tal modo al passaggio del mouse comparirà l'etichetta di descrizione.

-Un secondo modo, un po' più complesso ma di notevole effetto grafico sarebbe l'utilizzo di qualche tooltip jquery che facilmente trovi facendo una googlata.. ce ne sono per tutti i gusti!

[Simonpen2001]

Grazie mille per tutte le info e per la risposta rapidissima!

Il primo metodo lo conoscevo ma pensavo di tenermelo come riserva nel caso in cui non dovessi riuscire a far funzionare l'altro.

Il testo di fatto appare dal basso della foto con tempo 0.9secondi e si ferma dove gli ho detto. Ma appunto il problema è che come si vede in figura anche se sto sull'immagine verde per esempio la scritta "GREEN" compare sempre dove compariva la scritta BLUE ossia sulla prima immagine.

Adesso provo a cercare in goggle quello che mi hai suggerito e ti faccio sapere!

Intanto grazie ancora infinite per la disponibilità!

Simone

[mangusta91]

se metti ad ogni immagine un title è impossibile che appaia sempre alla prima foto..

comunque se devi fare una cosa "stilosa" i tooltip jquery sono perfetti

[Simonpen2001]

Ho trovato qualcosa...ma devo vedere meglio.
Intanto provo a mandarvi il link di quello che ho fatto: http://dl.dropbox.com/u/22933018/SITO1/index1.html

Dovrebbe essere visibile tra poco (lo sto caricando su dropbox)
Potete vedere il mio problema in PORTFOLIO

L'effetto è esattamente quello che ho per la prima immagine il problema è che non riesco a centrare il testo sulle singole immagini ma rimane sempre centrato sulla prima.

Grazie di nuovo.

[mangusta91]

c'è un po' di casino nel css ho visto.. secondo me il problema deriva da qualche position absolute e relative che mescoli..