如何使图像出现在另一幅图像时，鼠标悬停CSS3？(How to make an image appe

嘿，我想一个放大镜或一些图像时，像这个网站鼠标悬停弹出了另一幅图像- http://www.elegantthemes.com/gallery/当你将鼠标悬停在图片上方出现它的图像。 有谁知道如何实现这一目标？

不知道如果你需要任何代码，但这里是我的img标签的CSS：

img {
width: 600px;
height: 342px;
border-radius: 1px;
}

Answer 1:

你可以用它做

HTML

<div id="yourImage" ></div>

CSS

#yourImage {
 background-image: url('image1.jpg');
}


#yourImage:hover {
 background-image: url('overimage.jpg'), url('image1.jpg');
}

Answer 2:

有一个jQuery插件这一点。

第一个影响是，你在找什么。

Answer 3:

你可以试试这个 。 我认为它仅使用CSS。

Answer 4:

你需要检查CSS的position属性，让你可以在同一个地方两个元素。 然后就是昌opacity悬停形象。

Answer 5:

@Mateusz有最好的答案，但我会通过增加沿着该线的CSS过渡东西提高在这：

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

Answer 6:

尝试这个：

HTML：

<div class="your-img">
    <div class="your-hover"></div>
</div>

CSS：

.your-img {
    width: 300px; /* your image width and height here */
    height: 225px;
    background-image: url('../img/image_01.png');
}
.your-hover {
    width: 300px;
    height: 225px;
    opacity: 0;
    filter: alpha(opacity = 0);
    background-image: url('../img/image-hover_01.png');
}
.your-hover:hover {
    opacity: 0.5;
    filter: alpha(opacity = 50);
}

filter: alpha是IE浏览器，我希望它能帮助。

文章来源: How to make an image appear over another image when mouse hovers with css3?