Why does font of website change on image hover?

Question

I have 3 social media buttons on the right side of my website that rotate on hover a bit. And whenever anyone hovers over them they make the font of the website almost bold looking while on hover. Its only happening with these images and its quite annoying. Does anyone have any guesses as to why this might be happening?

Heres the html/CSS im using for each button:

<div id="socialicon1"><a href="http://facebook.com/sentinelgaming" target="_blank"><img src="http://files.enjin.com/202624/social%20media/facebook%20square.png" width="50" height="50" alt="facebook button"/></a></div>

#socialicon1  img {
    position: fixed;
    top: 350px;
    right: 13px;
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 
    }

#socialicon1 img:hover { 
    -webkit-transform: rotate(-9deg); 
    -moz-transform: rotate(-9deg); 
    -o-transform: rotate(-9deg);
}

And this is the website itself so you can take a look at it: http://www.sentinelgaming.net

Thanks a bunch in advance!

Chrome. Really? I thought it wasent working in Firefox last time I checked. Either way there has to be some kind of fix or option. — Josh Woelfel, Feb 13 '13 at 18:45
I'm not seeing what you describe but I am seeing some of the other content "blink out" when I hover those icons. — Sparky, Feb 13 '13 at 18:57

score 1 · Accepted Answer · answered Feb 13 '13 at 18:50

1

This is a known issue with webkit: http://css-tricks.com/forums/discussion/18538/transforms-cause-font-smoothing-weirdness-in-webkit/p1

answered Feb 13 '13 at 18:50

BBagi

2,035
1
19
23

Why does font of website change on image hover?

1 Answers1