What add to CSS to make the image with opacity

Don't suppose anyone can advise?
I'm using the "Start Up" template and have a K2 article with a image in.

I want to add a few lines of CSS to make the image opaque and then go back to normal when the mouse hovers over it however Joomla doesn't seem to like this.

I put the code in a plain text file and seems to work okay. Is this the best way of doing this or is there an alernative?

Code: Select all

<STYLE>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</STYLE>

<p><a href="http://vimeo.com/61799610" class="jcepopup" target="_blank" type="iframe"><img src="images/avt.png" width="241" height="136" alt="avt" /></a>
</p>

Current URL: http://visuallinemedia.com/index.php?option=com_k2&view=item&layout=item&id=163&Itemid=597

Thanks for any help!

Hi, first I suggest to use class'es and overwrite option, see & click on picture below in gavick template configuration.

custom code.png

Second, you need opacity effect for K2 images or images added by JCE or other editor ?

So if second answer, add extra class see example:

Code: Select all

<img class="make-me-opacity" width="241" height="136" alt="avt" src="images/avt.png" >

Now in css add :

Code: Select all

img.make-me-opacity { opacity:0.7;filter:alpha(opacity=70);  }
img.make-me-opacity:hover { opacity:1.0;filter:alpha(opacity=100);  }   

Fantastic!
Great response once again and worked first time!
Thank you for the help