-
.
ho creato un immagine NEWS lampeggiante che quando ci passi sopra col mouse (hover) apre una finestra news.
https://thesoulswarbleach.forumcommunity.net/
Non mi piace che si apre di botto, vorrei un animazione che faccia scendere il container del forum dall'alto verso il basso gradualmente e non di scatto come ora. Ci ho provato in ogni modo ma non riesco.
Grazie dell'aiuto. -
.
ciao
ho fatto delle prove e penso di aver ottenuto il risultato che volevi
il risultato è visibile qui --> https://centouno.forumcommunity.net
ho dovuto far delle modifiche e sicuramente dovrai farne anche tu (i forum non sono tutti uguali)
se vuoi puoi prelevare il codice in questa discussione
https://centouno.forumcommunity.net/?t=63007936. -
.
si l'effetto è quello che volevo ma ho giusto due appunti.
1) Solo dopo il rilascio totale delle news l'immagine lampeggiante deve riapparire e non in trasparenza mentre risale
2) Sotto l'immagine lampeggiante ora c'è uno spazio enorme vuoto mentre io volevo che il container salisse o scendesse di conseguenza all'animazione se possibile :-)
Inutile dire che lodo il tuo impegno eh. -
.
l'immagine che riappare dopo aver spostato il mouse è normale... o è hover o non lo è quindi appare o scompare e non so se sia possibile farla apparire come dici tu, dovrei farae delle provo appena ho tempo
per lo spazio enorme, l'animazione è basata sul'overflow: hidden e cioè quello che sta fuori dal contenitoreprincipale non si vede e se dovessi ridurre lo spazio, quando la news scende, scomparirirebbe la parte sotto in quanto sarebbe fuori dal contenitore principale.
per fare come dici è "abbastanza" semplice, ora ti spiego:
prendi il box della news, la posizioni con grandezza e altezza nella posizione finale.
una volta ben posizionato metti l'altezza della new a 0px
e nella parte in cui ci passi sopra col mouse metti l'altezza originale.
quindi con l'aggiunta di una transizione per l'altezza otteniamo l'effetto discesa rallentato
news{qui-tutte-le-sue-caratteristiche-background-color-ecc; height: 0; transition: height 2s;}
immagine:hover news{height:250px;display: block;}
(250px e 2s son valori che che ho messo a caso per l'esempio)
spero che la spiegazione sia chiara.. -
.
Ho capito pochissimo.
Ho visto che hai creato un id fisso in HTML (logokon) che determina l'altezza fissa del box, la transizione e che è appunto hidden.
Ho capito che vuoi neutralizzarla portando l'altezza a zero cosi come la transazione.....
non ho capito come impostare il tutto. -
.
Ti ho fatto un esempio veloce da vedere nello stesso posto https://centouno.forumcommunity.net quadratino blu
ho usato questo codiceCODICE<style>#boxcontenitore {position: relative; width: 800px; margin: auto; border: 1px solid red; text-align: center}
#boxcontenuto {width: 30px; display: inline-block; margin: auto}
#immaginehover {width: 30px; height: 30px; display: block; background-color: blue; margin: auto}
#testonews {color: black}
#news {position: relative; top: -30px; left: -385px; background-color: #C0C0C0; width: 800px; height: 0; transition: height 2s; overflow: hidden}
#boxcontenuto:hover #news {height: 200px; display: block}</style>
<div id="boxcontenitore">
<div id="boxcontenuto">
<div id="immaginehover"></div>
<div id="news">
<div id="testonews" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
</div>
</div>. -
.
Riusciresti a darmi il codice esatto? . -
.
scusa eccomi ho solo avuto adesso un po di tempo
inizia col vedere il risultato
https://centouno.forumcommunity.net
penso di aver risolto anche l'immagine che riappare solo dopo il rilascio
e lo strano effetto che si vede quando il testo scende o sale che sembra fuori dal contenitore ma non lo è,
e dovuto al bordo trasparente intorno alla tua immagine di sfondo.
poi vabbè probabilmente ci saranno dei piccoli dettagli che dovrai sistemare.. -
.
domandina
non ti serve più?. -
.
sisi mi serve ma ora devo trovare il tempo di provarla .
Hover con ritardo e animazione css dall'alto in basso |
