Image Moves on Hover - Chrome Opacity Issue

$('#toggleBlur').click(function() {  $('#content').toggleClass('blur')})

body {  padding: 5%;}
div {  filter: blur(0px);}
.blur {  filter: blur(.1px)}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button id="toggleBlur">Toggle blur</button>
<div id="content">  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium eum nisi voluptate eaque! Sequi sit nemo iste. Earum accusantium rerum consectetur cumque sequi maiores maxime reiciendis, alias beatae accusamus labore.</p>  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate enim magnam nemo atque, ad placeat ab unde consequatur minima velit, ipsam tempora laudantium molestias sapiente perspiciatis quaerat modi ratione voluptatem?</p>  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti commodi cum sed nemo fugiat non esse ex quos consectetur ipsam alias laboriosam, cumque eaque omnis quae accusamus, repellat dolore modi!</p></div>

Chrome opacity transition bug

I condensed a few :hover rules and that seems to have solved it.

CSS:

body {
    background: #ffff;
}
/* Setup for the halves of the screen */
 #right {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 50%;
    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    position: fixed;
    top: 0;
    right: 0;
    background: #389A7A;
    background-size:cover;
}
#left {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 50%;
    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    background: #0C4270;
    background-size:cover;
}
/* Setup for the image containers */
 #rightImage, #leftImage {
    opacity:0.15;
    filter: alpha(opacity=15);
    /* For IE8 and earlier */
    background: rgba(0, 0, 0, 0.15);
    -webkit-transition: opacity 2.00s ease;
    -moz-transition: opacity 2.00s ease;
    transition: opacity 2.00s ease;
    position: relative;
}
#rightImage:hover, #leftImage:hover {
    opacity:1.00;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
    background: rgba(0, 0, 0, 1.0);
}
#rightImage:hover + #overlayRight, #leftImage:hover + #overlayLeft {
    visibility: hidden;
}
/* Setup for the images */
.rightImage {
    /* Set rules to fill background */
    min-width: 50%;
    min-height: 100%;
    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0px;
    right: 0;
}
.leftImage {
    /* Set rules to fill background */
    min-width: 50%;
    min-height: 100%;
    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0px;
    left: 0;
}
/* Setup for the logo image */
#overlayLeft {
    visibility: visible;
}
.overlayLeft {
    /* Set rules to fill background */
    min-height: 40%;
    min-width: 40%;
    /* Set up proportionate scaling */
    width: 40%;
    height: 40%;
    /* Set up positioning */
    position: absolute;
    top: 30%;
    left: 30%;
    pointer-events: none;
}
#overlayRight {
    visibility: visible;
}
.overlayRight {
    /* Set rules to fill background */
    min-height: 40%;
    min-width: 40%;
    /* Set up proportionate scaling */
    width: 40%;
    height: 40%;
    /* Set up positioning */
    position: absolute;
    top: 30%;
    right: 30%;
    pointer-events: none;
}

Demo: https://jsfiddle.net/hopkins_matt/mxbjja29/2/

CSS images move when hovering over on Chrome

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="Sample Image"/></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"/> 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).

Opacity change with hover creates an image shift or distortion

I found an answer on this so post.

For me the solution was to use the following on the img

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
-webkit-backface-visibility: hidden;

---

Related Topics