modulo joomla e immagini con effetto css

[streghello]

Ho un modulo Joomla in cui ho delle immagini a cui vorrei applicare un effetto css (in pratica vorrei che quando ci passo sopra diventassero più grandi).
Ho trovato su un sito il codice html e css da applicare per ottenere il risultato.
So dove mettere il codice html... ma il codice css dove va messo?
Ho provato a mettere il codice in Avanzate > Suffisso della classe CSS modulo ma senza risultato...

Dove va messo questo codice css? Come lo richiamo nel modulo?

Ho pensato anche di creare un file .css nella cartella css del template e in quel file mettere il codice di sui sotto... ma poi? bho...

Per essere pratici:

questo è il codice html:
<div class="grow pic">
  [img width= height= alt=portrait]http://lorempixel.com/400/400/people/9[/img]
</div>

e questo il codice css:
.grow img {
  height: 300px;
  width: 300px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.grow img:hover {
  width: 400px;
  height: 400px;
}


Ciao e grazie

[maicolstaip]

Ciao,
metti questo

Codice: [Seleziona]

.grow img {
  height: 300px;
  width: 300px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.grow img:hover {
  width: 400px;
  height: 400px;
}
alla fine di un qualsiasi file css del template, ma meglio se hai la possibilità di usare un custom.css

Ciao

[streghello]

e una volta creato il custom.css, come dico al template che deve andare a guardare anche li?
Non credo sia sufficiente mettere il file nella cartella css del tempalte, o sbaglio?