Salve ragazzi scrivo qui perchè non ho ancora trovato nulla che mi aiuti con questo mio piccolo problema..
Sto realizzando un sito dove, in una particolare pagina, ho vari paragrafi "cliccabili"..volendo creare un effetto carino ci ho posizionato appena sorpa dei div con altezza e larghezza a 0, il bordo (solo quello superiore e quello destro) rosso e opacity a 0: sono invisibili quindi.
Al passaggio del mouse sui vari <p> però questi div vengono attivati, e grazie a una transizione riaquistano opacità, poi larghezza e altezza creando un particolare effetto di "evidenziatura" intorno al <p> .
In pratica ogni volta che passo con il mouse sopra a qualcuno di questi paragrafi, parte da sinistra verso destra una linea rossa che arriva fino in fondo al <p> e una volta arrivata all'estremità del paragrafo scende fino al suo margine inferiore.

Il problema che ho è che quando il mouse "esce" dall'area del paragrafo la transizione riparte nello stesso ordine di prima, ovvero togliendo l'opacità, poi la larghezza e quindi l'altezza..

Ecco io avrei bisogno di farla ripartire al contrario, mi spiego:
All'evento "hover" va bene così, prima il div riaquista opacità, poi larghezza e poi altezza creando l'effetto di questa linea rossa che traccia il contorno del <p>.
Non appena il mouse esce dal <p> vorrei che la transizione procedesse "al contrario", quindi prima toglie l'altezza poi la larghezza e infine l'opacità..
Spero di essermi spiegato e di trovare qualcuno disposto ad aiutarmi soprattutto! grazie (: