html - How to correct Hover css effect tremble/shaking? -

html - How to correct Hover css effect tremble/shaking? -

i made hover effect in website references image original image in 65% of opacity. problem is, , happens 1 time, first time hover shakes/tremble bit, starts working fine. perhaps missing in hover code? can see what's wrong?

thanks help :)

the css code i'm using:

#rebface { content:url("http://static.tumblr.com/g1c47pc/td2n783c4/nface.png"); position:relative; left:8%; margin-left:20px; display:block; box-sizing: border-box; } #rebface:hover { content:url("http://static.tumblr.com/g1c47pc/alcn783j0/nface_65.png"); transition: 0.5s linear; position:relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; }

the html:

<div style="margin-top:20px; display:flex;"> <a target="_blank" href="http://www.facebook.com/sharer.php?u={permalink}"><div id="rebface"></div></a> </div>

you can see here: (this website works in chrome/safari now)

http://testedesignfranjas.tumblr.com/post/87336302788/blend-food-culture-magazine-concepcao-de

you swapping images in css content attribute. i'm quite sure these arent cached on page load loaded when hovering causes short flickering.

you can avoid using opacity instead of image.

.facebook { content:url("http://static.tumblr.com/g1c47pc/jhdn7hp40/sitef_1.png"); left:50px; z-index:2; position:absolute; top:110px; left:0px; z-index:50; } .facebook:hover { opacity: 0.6; -webkit-backface-visibility: hidden; }

and side note -- utilize background instead of adding background image via content attribute. works older browsers , much more of best practice.

html css css3