Transizioni css

[gioca72]

SalveNel modulo  html personalizzato se si crea un effetto hover al passaggio del mouse tra due immagini e poi si disattiva l' editor visuale, il codice generato è il seguente:


<p><img onmouseover="this.src='images/immagine1.png';" onmouseout="this.src='images/gcgraphics/logomedio_03.png';" src="images/immagine2.png" alt="logomedio 03" /></p>


se volessi applicare una transizione tra le due immagini con i css come ad esempio questa:



transition-duration: [color=rgb(0, 153, 0) !important]0.4[/color]s;
   [color=rgb(0, 153, 0) !important]transition-timing-function: ease;

dove dovrei inserirla ?


Scusate se ci sono errori di concetto, ma stò cercando di capire i css abbinati ajoomla.....[/color]

[giusebos]

Scusate se ci sono errori di concetto, ma stò cercando di capire i css abbinati ajoomla.....

Un css può essere abbinato a tutto cio che html e non solo a joomla.
Ti serve uno dei tanti tutorial che ultimamente circolano in rete sulle transizioni con i CSS

prova con questa frase su google.

transizione immagini css3

[gioca72]

Si l'ho gia fatto e ne ho trovati di molto carini il problema è che non ho capito come inserire il codice abbinandolo ad un immagine.
Faccio un esempio, questo è il codice di un effetto trovabile a questa pagina:
http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/
e vorrei capire come utilizzarlo in joomla. posso utilizzare un modulo html disattivandol' editor visuale ?


The HTML
<div id="demo-3"> <img src="optimusprime.jpg"/> <div> <h3>Transformers</h3> <p>More than meets the eye</p> <> <>


The CSS
#demo-3{position:relative;} #demo-3 img{ opacity:1 -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; } #demo-3 .details{ position:absolute; top:0; left:0; opacity: 0; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; } #demo-3 .details:hover{ opacity: .9; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; }

[giusebos]

cerca prima di imparare a camminare e poi vedi se riesci anche a correre.

fai i tuoi esperimenti su un file html.
Se tutto va bene replichi dentro un articolo di joomla, disattivando l'editor.

[gioca72]

Credimi un pò ci gioco con html e css, e di esperimenti ne ho fatti, ma non riesco ad adattarli a joomla, ad esempio se inserisco il codice dell' esempio precedente ovviamente adattato al mio caso mi prende il codice html facendomi visualizzare l'immagine ma non il cssvisualizzandolo come un normale  file di testo :



<div id="prova-1" class="provabox">
   <img src="images/logo.png"/>
<>


#prova-1 img {
   -webkit-transform: scale(1);
   -webkit-transition-timing-function: ease-out;
   -webkit-transition-duration: 500ms;
}
#prova-1 img:hover{
   -webkit-transform: scale(.5);
   -webkit-transition-timing-function: ease-out;
   -webkit-transition-duration: 500ms;
}

[giusebos]

non so che stai facendo perchè sono allergico al codice incollato in maniera "creativa", ma una cosa voglio aggiungerla:

Il codice css devi inserirlo nel file principale del tuo template
il codice html nella textarea con editor disattivato del tuo articolo.

[gioca72]

Grazie della disponibilità è quello che cercavo.....