stai mescolando i due esempi.
Negli esempi di cavicchiandrea hai un'immagine di sfondo che rappresenta un cubo a sinistra e nella parte destra lo stesso cubo semitrasparente e l'aggiunta della scritta. Allo stato normale del div viene visualizzata la parte sinistra dell'immagine, allo stato hover invece quella destra. Se guardi il codice vedrai infatti che le coordinate dello sfondo cambiano.
Nel mio esempio invece l'immagine e il testo, inserito come testo e non graficamente, sono nell'html. Allo stato normale del link l'immagine è opaca e il testo del tutto trasparente. Allo stato hover il testo diventa visibile (mutando la proprietà opacity) e l'immagine diventa semitrasparente (variando sempre l'opacity).
La scelta di un procedimento e dell'altro dipende dalle tue esigenze.
In generale, se l'immagine e il testo rappresentano dei contenuti, e non sono solo elementi decorativi, dovranno stare nell'html (e non nel css).
Puoi anche avere l'immagine come sfondo e il testo nell'html, ma non va comunque bene quanto hai fatto tu perché se vari l'opacity del contenitore quest'ultima avrà effetto su tutto ciò che è al suo interno. In questo caso occorrerà procedere in maniera diversa. Ma per il momento mi sembra inutile spiegarti come fare perché mi pare ci sia già abbastanza confusione senza aggiungere altri codici.
Ti allego una pagina di esempio che riprende il mio esempio precedente con l'aggiunta dell'animazione per la dissolvenza. Ho usato un link come contenitore, ma potrei avere anche un div. L'importante è che tu capisca il criterio
Rispondi quotando