Question

嘿，我希望放大镜或一些图像在像这个网站上鼠标悬停时弹出另一个图像 - 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 plugin。

第一个效果就是你要找的东西。

Answer 3

您可以尝试this。我认为它只使用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，我希望它有所帮助。

当鼠标悬停在css3上时，如何使图像显示在另一个图像上？

6 个答案: