Question

I have frame styles for the image:

.frame {
    background:#efefef;
    border:1px solid #f6f6f6;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); /* @todo Old Browsers Fix */
    margin-bottom:15px;
    padding:4px;
}

in one place of the project I work on, I have following HTML code:

<a href="#" class="preview">
    <img class="frame" src="http://placehold.it/288x159" alt="" />
</a>

Basically, I want to change file opacity on mouseover and add a background (preview icon) to the link. I have following code:

.preview img.frame {
    margin:0;
    position:relative;
}
.preview:hover {
    background:url('../img/icon_zoom.png') center center no-repeat;
    display:inline-block;
    z-index:40;
}
.preview img { /* @todo Add different browsers rules */
    opacity: 1;
    /*moz-transition-property:opacity;
    -moz-transition-timing-function:ease-out;
    -moz-transition-duration:500ms;*/
    -moz-transition:opacity 1s ease-in-out;
}
.preview:hover img {
    opacity:.5;
    -moz-transition:opacity 1s ease-in-out;
    /*-moz-transition-property:opacity;
    -moz-transition-duration:500ms;
    -moz-transition-timing-function:ease-out;*/
    display:block;
    position:relative;
    z-index:-1;
}

However I faced few issues:
– how can I show background only for image body (currently it’s also being displayed on the border)?
– why opacity is not being changed in Chrome?

jsFiddle added. As you may see, it works in FF, but not in Chrome.

Answer 1

The problem appears to be that you’re changing the display to inline-block. Take it out, it should have the same functionality and work just fine.

Changing a couple other things seems to have it working as you intended. http://jsfiddle.net/minitech/v2vtw/2/