Question

在图片hover上，我想在background和opacity上显示不同的小图片，以便原始图片仍然可见。我想使用transition来减缓悬停效果。所以这就是我正在努力而不是工作：

HTML：

<img src="http://i50.tinypic.com/2poy3kl.jpg" class="test" />

CSS：

.test {
   background: red url("http://i50.tinypic.com/10mue4k.png");
   transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
}

.test:hover {
    opacity: 0.5;   
}

JS小提琴： http://jsfiddle.net/AXQW4/2/

有人可以帮我这个吗？

Answer 1

你需要一个额外的包装器。正好是图像的大小，并给出了背景。然后，当您将鼠标悬停在图像上时，隐藏它并显示基础背景。

<强> Live example

HTML

<div class="background">
    <img src="http://i50.tinypic.com/2poy3kl.jpg">
</div>

CSS

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
}
.background {
    background: url("http://i50.tinypic.com/10mue4k.png");
    display: inline-block;
    font-size: 0;
}
.background img {
    -webkit-transition: all .5s;
}
.background img:hover {
    opacity: 0.5;
}

无需知道图像的确切尺寸。

Answer 2

这是你要找的东西：http://jsfiddle.net/AXQW4/3/

Answer 3

又一个演示：）

http://jsfiddle.net/AXQW4/7/

Answer 4

这是您想要的 Demo 或者 LINK

.test {
   background: red url("http://i50.tinypic.com/10mue4k.png");

 -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.test:hover {
  opacity:.5;
}

在转换时悬停时显示不同的图像

4 个答案:

HTML

CSS