remove hover animation

Question

please go to below link and click story,

http://premio-e.de/

when I mouse over,

http://awesomescreenshot.com/03b435w09

it's animating on hover.

how do i remove this. I am using below css for this,

.storypageThumb1 {
    float:left;
    width:175px;
    height:91px;
    text-indent: -9999px;
    background:url(../images/storyPage-thumb01_new.png) no-repeat;
    text-transform: uppercase;
}

.storypageThumb1:hover {
    background-position:0 -91px;
}

it's suppose to just change the possition. not animating.

Answer 1

You have set all your anchors to animate on all CSS changes with the following code:

a { -webkit-transition: all 0.3s ease; }

You can override this at your storeypageThumb1:

.storypageThumb1 {
    -webkit-transition: none;
    ...
}

Answer 2

In firebug I noticed that all your a tags have a transition associated:

-moz-transition: all 0.3s ease 0s;

That's why it is animating. You have to remove the transition from that element, like:

.storypageThumb1 { 
    transition:none; 
    -moz-transition:none; 
    -o-transition:none; 
    -webkit-transition:none; 
}