Basic CSS: When applying effects to images in CSS, how do you exclude the banner image?

I have this bit of CSS that results in images popping out a bit when the you hover over them:

a img 
{
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-tra开发者_JAVA技巧nsform 0.3s ease;
    transition: transform 0.3s ease;
}

a:hover img 
{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);

    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

The problem is that this applies to all images, including my banner. Is there anyway to exclude the banner image?

---

If you can reference that banner image with a class or id, and you're okay with spurning your IE8 users, the CSS3 selector :not() could work wonders.

A jsfiddle for you to look at.
An update to the above Fiddle that's a bit more complex.

Besides IE8, every other major browser, and IE9, have support for this. Firefox and Safari support go back as far as version 1, assuming this site is correct.

---

Reference all hover images with a class name. That will separate them from images that do not have a class.

Ex:

<img class="hoverme" src=".." />
<img class="hoverme" src=".." />
<img src=".." />

.hoverme:hover{
  ..
}

Only images with hoverme class will be effected.

---

Sure, but it's not very elegant-looking. If your banner has an id, just override those attributes (hopefully I know what I'm doing):

a img#banner
{
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

a:hover img#banner
{
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}