-
Valls ~+2
.User deleted
TESTO SU UN'IMMAGINE AL PASSAGGIO DEL MOUSE
Impareremo come far comparire un testo sopra un'immagine al passaggio del mouse.
ESEMPIO
• Primo passo: procuratevi un'immagine. Io ho scelto questa.
Adesso creiamo le classi relative alla nostra immagine e al nostro testo (da mettere in Colori e Stili qui nel circuito):CODICE.immagine {width: NUMEROpx; height: NUMEROpx; background: url(IMMAGINE) no-repeat}
.testo {height: NUMEROpx}
Per quanto riguarda width: NUMEROpx inseriamo la larghezza in pixel della nostra immagine al posto di NUMERO. La mia immagine è di 250px, quindi:CODICE.immagine {width: 250px; height: NUMEROpx; background: url(IMMAGINE) no-repeat}
.testo {height: NUMEROpx}
Per quanto riguarda height: NUMEROpx, sia per l'immagine, sia per il testo, inserite l'altezza in pixel dell'immagine scelta al posto di NUMERO. La mia è di 150px:CODICE.immagine {width: 250px; height: 150px; background: url(IMMAGINE) no-repeat}
.testo {height: 150px; background: #HEX}
Piccola nota: se decidete di mettere del padding al vostro testo, l'altezza fissata per quest'ultimo (height) dovrà essere inferiore all'altezza dell'immagine, a seconda del valore dato al padding.
Al posto di IMMAGINE inserite l'URL della vostra immagine e al posto di HEX mettete il colore in esadecimale che farà da sfondo al vostro testo.
• Secondo passo: adesso facciamo scomparire e ricomparire il testo. Aggiungere opacity:0 alla classe .testoCODICE.testo {height: 150px; opacity:0}
Ora il vostro testo è invisibile. Per fare in modo che ricompaia al passaggio del mouse, aggiungiamo questo:CODICE.testo {height: 150px; opacity:0}
.testo:hover {opacity: 1}
Per rendere l'effetto più gradevole, possiamo aggiungere una transizione:CODICE.testo {height: 150px; opacity:0; transition: all .7s ease-in-out}
.testo:hover {opacity: 1}
• Terzo passo: andiamo ora a creare i nostri div (HTML). Facciamo in modo che il testo sia contenuto nell'immagine:CODICE<div class="immagine"><div class="testo"> Inserire qui il testo </div></div>
Non ci crederete, ma il tutorial è già finito!
Ora potete personalizzare il testo e l'immagine come ho fatto io e sfruttare l'effetto per una tabella, una sidebar, un logo o quel che preferite. Bye ~Tutorial realizzato da Valls ~ solo per Skin Factory.
Non postate altrove il tutorial senza permesso e non spacciatelo per vostro, grazie.
Edited by Valls ~ - 6/8/2013, 21:04
. -
.:Meian:. .
User deleted
Che bello XD però a me non funziona>.< mi puoi aiutare? . -
.
Link del forum =) . -
.:Meian:. .
User deleted
è il forum di prova qui . -
.
In home funziona, cosa volevi fare esattamente? . -
.:Meian:. .
User deleted
io ho messo l'immagine ma non si vede...<.< . -
Valls ~ .
User deleted
Puoi postarmi il codice completo che hai usato, per favore? (: . -
.:Meian:. .
User deleted
si ecco
CSSCODICE.benvenuti {width: 500px; height: 208px; background: url(http://i.imgur.com/estPF.png) no-repeat}
.testo {background: rgba(255, 255, 255, 0.9); height: 142px; text-shadow: 1px 1px 0 #FFF}
.testo {opacity: -1; transition: all .5s ease-in-out}
.testo:hover, .testo:focus {opacity: 1}
HTMLCODICE<div class="Benvenuti"><div class="testo"> Pensi che gli anime non siano solo cartoni animati per bambini? Ti piacciono i manga e il mondo dell'animazione giapponese? Oppure vuoi semplicemente saperne di più? Anime Magic Fansub è il forum che fa per te, in cui condividere le tue passioni con tanti nuovi amici! </div></div>. -
Valls ~ .
User deleted
CODICE.benvenuti {width: 500px; height: 208px; background: url(http://i.imgur.com/estPF.png) no-repeat}
Qui hai messo "benvenuti" con lettera minuscola.CODICE<div class="Benvenuti">
Qui invece con la lettera maiuscola. Metti tutto uguale ^^. -
.:Meian:.+1 .
User deleted
Glattieee...
non ci avevo pensato alle lettere maiuscole e minuscole <.<. -
Valls ~ .
User deleted
Di nulla (: . -
.
apposto del testo posso mettere anche i link veloci? . -
.
Ma se volessi questo effetto nell'immagine in forma dovrei mettere il css e l'html separati no? Perchè si vede solo il testo non l'immagine D: . -
.
hai messo nei css l'immagine?
.immagine {width: 250px; height: NUMEROpx; background: url(IMMAGINE) no-repeat}
.testo {height: NUMEROpx}
devi inserirla apposto della scritta IMMAGINE. -
.
Questo è quello che ho usato io (: lo rivedresti? CODICE.immagine {width: 500px; height: 272px; background: url([URL=http://imgur.com/tqyJRAA.gif]http://imgur.com/tqyJRAA.gif[/URL]) no-repeat}
.firma {height: 10px; background: #ffffff; opacity:0; transition: all .7s ease-in-out}
.firma:hover {opacity: 1}
<div class="firma"><div class="testo"> Masera Shine. Bambola di Nox. Black Valkyrie. Molti nomi ma una sola identità.
O forse io sono solo un'illusione. Forse il Giustiziere di Nox non è mai esistito. Tu la conosci la sua storia?
</div></div>.
Testo su immagine al passaggio del mouse[ HTML | Css ] Testo che compare sopra un'immagine al passaggio del mouse. |
Web
Contacts