remove hover animation

Question

please go to below link and click story,

when I mouse over,

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.

Try this http://stackoverflow.com/questions/2688701/remove-unbind-hover-on-anchors — Selvakumar Ponnusamy, Apr 23 '12 at 12:21

score 5 · Answer 1 · answered Apr 23 '12 at 12:16

5

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;
    ...
}

answered Apr 23 '12 at 12:16

David Hedlund

128,221
31
203
222

Thanks mate :) appreciated very much for quick response :D – S.S.Niranga Apr 23 '12 at 12:26
1

Note that `-webkit` is only for webkit browsers. The same would apply to `-moz` etc. – David Hedlund Apr 23 '12 at 12:36
@user788647 maybe you should finally accept an answer if it worked for you! – Ash May 21 '12 at 08:26

score 4 · Accepted Answer · edited Jun 22 '12 at 05:05

4

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; 
}

edited Jun 22 '12 at 05:05

thecodeparadox

86,271
21
138
164

answered Apr 23 '12 at 12:21

Cthulhu

5,095
7
46
58

score 1 · Answer 3 · answered Apr 23 '12 at 12:21

in this site their is a CSS file called normalize.css

a {
    -moz-transition: all 0.3s ease 0s; // convet this line to -moz-transition: none;
    color: white;
    outline: medium none;
    text-decoration: underline;
}

OR for your .storypageThumb1 write:

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

score 1 · Answer 4 · answered Apr 23 '12 at 12:27

1

Much simpler than this!

.storypageThumb1:hover { background: none; }

answered Apr 23 '12 at 12:27

Jannis M

745
1
4
15

remove hover animation

4 Answers4