1

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

不确定您是否需要任何代码，但这是我的 img 标签的 css：

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

6 回答 6

5

你可以这样做

HTML

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

CSS

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


#yourImage:hover {
 background-image: url('overimage.jpg'), url('image1.jpg');
}
于 2012-07-08T16:00:51.830 回答
3

为此有一个jquery 插件。

第一个效果就是您要寻找的效果。

于 2012-07-08T15:59:08.620 回答
3

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

于 2012-07-08T16:01:40.660 回答
1

您需要检查 CSSposition属性，以便将两个元素放在同一个位置。然后只是改变opacity悬停图像的。

于 2012-07-08T16:00:44.197 回答
0

@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;
于 2012-07-08T18:51:31.103 回答
0

试试这个：

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，希望对您有所帮助。

于 2012-07-08T20:12:52.140 回答