更改图像的不透明度，并在鼠标悬停时添加链接背景

Question

我有图像的框架样式：

.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;
}

在我工作的项目的一个地方，我有以下HTML代码：

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

基本上，我想更改鼠标悬停时的文件不透明度，并在链接中添加背景（预览图标）。我有以下代码：

.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;
}

然而，我遇到了一些问题：-如何只显示图像主体的背景（目前它也显示在边框上）？-为什么Chrome中的不透明度没有改变？

jsFiddle补充道。正如你所看到的，它可以在FF中工作，但不能在Chrome中工作。

Answer 1

问题似乎是将display更改为inline-block。把它拿出来，它应该具有相同的功能，并且工作得很好。

改变一些其他的事情似乎能让它按你的意愿运行。http://jsfiddle.net/minitech/v2vtw/2/