|
|||||||
|
|
|
 |
|
|
Strumenti |
16-07-2015, 15:25
|
#1 |
|
Junior Member
Iscritto dal: Jul 2015
Messaggi: 1
|
Animazioni CSS
Salve a tutti. Sto creando un infografica nella quale, al passaggio del mouse su una relativa immagine, deve comparire una casella di testo esattamente sotto l'immagine stessa. Sono riuscito a creare la giusta animazione (a cascata) ma ho un problema che proprio non riesco a risolvere... Per far "scendere" la casella di testo (col relativo contenuto) non mi basta passare il mouse su qualunque punto dell'immagine ma la casella di testo si presenta solamente se passo il mouse nella parte alta dell'immagine stessa il che risulta abbastanza scomodo. Come posso risolvere? Vi sarei molto grato se mi aiutaste. Ecco il codice (ovviamente l'immagine e il testo inseriti sono parte di una piccola prova
 ):<! DOCTYPE html> <html> <head> <!--<script language="javascript"> function change(html) { description.innerHTML=html } </script>--> </head> <body> <!--<a href="http://www.facebook.com" onmouseover="javascript:change('Ciao')"; onmouseout="javscript:change('')"> <img src="http://static.tumblr.com/a7ac3f93e7e570c6107dc3ffbd3e367a/trlp616/935n8aou8/tumblr_static_ckzvuxmfhw8cs8c4oskc0og4k.jpg"; id="Homer"/></a> <div id="description"> </div>--> <a href="#"> <div id="Casella"> <p> Ciao mi chiamo Homer </p> <!--<span id="Testo">Ciao mi chiamo Homer</span>--> </div> <img id="Homer" src="http://www.buzzland.it/wp-content/uploads/2013/11/2272658762.png" alt="Ciao"/> <style> a { display: block; width: 400px; height: 450px; padding: 0; margin: 0 auto; text-decoration: none; } #Casella { opacity: 0; width: 400px; height: 200px; padding: 5px; border-color:#000 top: 0; position:absolute; text-align:center; -moz-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out; } #Homer { border: none; } <!--#Testo { opacity: 0; width: 400px; height: 450px; position: absolute; top: 0; padding: 5px; text-align: center; -moz-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out; color: #000; font: 1em Arial, sans-serif; } #Testo:hover { top: 455px; opacity: 1; }--> #Casella:hover { top: 450px; opacity: 1; border-color: red; border-style:solid; border-width: 2px; } p { opacity: 0; } p:hover { top: 300px; opacity: 1; text-align: center; color: black; } </style> </body> |
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 05:04.
