Salve a tutti, innanzitutto mi scuso se scrivo nella sezione sbagliata.
Dovrei realizzare un toggle, che mostri al click un div con larghezza a tutto schermo e altezza definita in PX.
Il codice HTML è:
Ecco invece il codice CSS relativo agli elementi:codice:<div class="ultra-contain"> <div class="biglietto"> <img src="http://www.appleface.net/demo/wp-content/uploads/2013/10/Biorisorgive.png" /> <span class="title"> <htitle> <p>Bio Risorgive</p> </htitle> </span> </div> <div class="span-container"> <div class="divinfo"> <p class="trigger"> <a href="#">Tutte le info</a> </p> </div> </div> </div>
Alla pressione del link contenuto in trigger, si dovrebbe visualizzare un elemento di classe .info-container che, oltre alle caratteristiche sopra elencate, si apra gradualmente e modifichi la dimensione della pagina in modo dinamico.codice:.biglietto { position: relative; display: block; } htitle { font-size: 20px; color: #FFF; } htitle p { text-align: center; margin-top: 4px; font-size: 20px; } .span-container { width: 100%; height: 30px; background-color: #05B5FA; margin-left: 0; } .divinfo p { text-align: center; font-size: 20px; color: #FFF; } .divinfo { width: 100%; margin-top: 2px; } .toggle-container { height: 200px; width: 100%; left: 0; bottom: 30px; background-color: #05B5FA; position: absolute; display: block; float: left; } .trigger a:hover { border-radius: 10px; } .trigger a { color: #FFF; border-bottom: 2px solid; } .title { position: absolute; width: 100%; top: 0; left: 0; background-color: #05B5FA; height: 30px; }
L'effetto che vorrei ottenere nello specifico è questo:
Senza titolo-1.jpg
Vi ringrazio in anticipo per l'aiuto![]()

Rispondi quotando

