Animazione del testo quando si passa con il mouse su un’immagine

Ecco una “pagina di introduzione” che sto cercando di configurare: http://sofit.miximages.com/html/c1TgQDf.jpg

E pensavo invece di avere quelle tre righe di testo che potevo fare in modo che quando qualcuno aleggia su una di quelle tre bandiere, sopra di esse una linea si attenua, a seconda della lingua (quando si posiziona il mouse sulla bandiera del Regno Unito, compare la linea inglese, quando si sorvola la bandiera tedesca, compare il testo tedesco).

Ecco cosa ho provato finora (parte inglese, gli altri sono gli stessi):

.en { text-align: center-top; line-height: 0px; color: transparent; font-size: 30px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .en:hover { line-height: 133px; color: #e0e0e0; } .en img { padding-right:20px; } 

Ho preso in prestito il CSS da qui: designshack.net/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste, è il terzo esempio, eccolo in azione: designshack.net/tutorialexamples /HoverEffects/Ex3.html

In questo punto il testo sfuma verso il basso sullo spazio vuoto a destra dell’immagine, mentre voglio che sbiadisca verso l’alto (centrato orizzontalmente sulla pagina stessa) sopra le tre bandiere.

Finora non riesco davvero a capire come far andare il testo sopra (sono davvero solo un n00b), con il codice sopra riportato scorre semplicemente in uno spazio vuoto sotto le bandiere, non viene mostrato alcun testo …

Ecco la parte html: pastebin.com/NzRDmfiT

Non volevo collegarmi alla pagina in quanto non voglio ancora rivelare il sito. Ma se necessario, potrei caricarlo da qualche parte in modo da avere una copia online con cui giocare nella finestra di ispezione degli elementi (o come si chiama in altri browser).

È ansible ottenere il comportamento desiderato utilizzando jQuery:

 $(function(){ $("#flags a").stop().hover(function(){ $( $(this).data("message") ).animate({ opacity: 1, lineHeight: "+20px" }, 1000); },function(){ $( $(this).stop().data("message") ).animate({ opacity: 0, lineHeight: "-20px" }, 1000); }); }); 

Con il seguente HTML

 

Willkommen auf Stefans Gallery, klicken Sie auf, um die Deutsch Version der Website fortfahren.

Bine ati venit la Stefan's Gallery, dati click pentru a continua pe varianta in romana a site-ului.

Welcome to Stefan's Gallery, click to proceed to the english version of the site.

E il seguente CSS

 body { background-image: url('http://vengefulchip.tk/playground/pattern.jpg'); background-position: center center; background-attachment: fixed; } #content { position: relative; background: rgba(25, 25, 25, .5); border: 2px dashed rgba(45, 45, 45, .8); padding-top: 25px; padding-bottom: 50px; margin-left: 10%; margin-right: 12%; margin-top: 2%; margin-bottom: 2%; } #logo { text-align: center; margin-bottom: 40px; } #de, #ro, #en { position: relative; font-size: 25px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; color: #e0e0e0; line-height: 0; text-align: center; opacity: 0; width: 50%; height: 20px; margin: 10px auto; } #ro { top: -30px; } #en { top: -60px; } #flags { position: relative; margin: 10px auto; width: 365px; }