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

On the image hover, I want to display a different small image on it with a background and opacity so that the original image is still visible. I want to use the transition to slow the hover effect. So here's what I'm trying and not working:

在图像悬停时,我想在其上显示具有背景和不透明度的不同小图像,以便原始图像仍然可见。我想使用转换来减缓悬停效果。所以这就是我正在尝试而不是工作:

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 Fiddle: http://jsfiddle.net/AXQW4/2/

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

Can someone please help me with this?

有人可以帮我这个吗?

4 个解决方案

#1

You'll need an additional wrapper for this. Exactly the size of the image, and give that the background. Then, when you hover over the image, you hide it and the underlying background is revealed.

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

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

No need to know the exact dimensions of the image.

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

#2

Is this something you were looking for: http://jsfiddle.net/AXQW4/3/

这是你在寻找的东西:http://jsfiddle.net/AXQW4/3/

#3

One more demo :)

还有一个演示:)

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

#4

Is this what you want Demo Or this 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;
}