CSS images move when hovering over on Chrome

Question

When I hover on any of my images it slightly moves to the right. This only happens on Chrome. All other browsers are fine. My site is http://toarumajutsunoindex.me/ can anyone tell me how to fix this?

works fine in my chrome browser – Infinity Nov 03 '13 at 05:50 — Infinity, Nov 03 '13 at 05:50

score 0 · Accepted Answer · edited May 23 '17 at 10:24

Validation is your best friend, you have a missing closing div tag:

<li>
  <div class="box-images">
    <a href="http://toarumajutsunoindex.me/2394/"><img
      src="http://24.media.tumblr.com/a9f90ae6e9476ab04373a71501d97755/tumblr_mps7c973tK1rfyftbo1_250.jpg" width="225"
      alt=""/></a>

    <div class="smallinfo">
      <div class="box-date">November 2, 2013</div>
      <div class="likebox">
        <div id="post-ratings-2394" class="post-ratings" data-nonce="f404e6ef4d"><img id="rating_2394_1"
                                                                                      src="http://toarumajutsunoindex.me/wp-content/plugins/wp-postratings/images/heart/rating_1_off.gif"
                                                                                      alt="1 Like" title="1 Like"
                                                                                      onmouseover="current_rating(2394, 1, '1 Like');"
                                                                                      onmouseout="ratings_off(0, 0, 0);"
                                                                                      onclick="rate_post();"
                                                                                      onkeypress="rate_post();"
                                                                                      style="cursor: pointer; border: 0px;"/>
        </div>
        <div id="post-ratings-2394-loading" class="post-ratings-loading"><img
            src="http://toarumajutsunoindex.me/wp-content/plugins/wp-postratings/images/loading.gif" width="16"
            height="16" alt="Loading ..." title="Loading ..." class="post-ratings-image"/>&nbsp;Loading ...
        </div>
      </div>
    </div>
  </div><!--/.This closing tag was missing-->
</li>

Update:

Okay, turns out that the mistake below wasn't the one causing problem.

This issue appears to be a Chrome bug according to this topic, and setting position:relative to inner img solves the problem (at least in your case).

Ok i fixed the missing div but I still see images slightly moved to the right when hovering over — EdibleMuffin, Nov 03 '13 at 06:43

CSS images move when hovering over on Chrome

1 Answers1