Question

悬停时，将图像显示在图像上的简单方法是什么？

使用css ..我需要为我的画廊这样做，所以我可以像ZOOM图标一样显示

将图片悬停在图库中时，

我需要在这里做：

<div class="grid-wrap">
    <div class="grid" >
        <figure ><img src="img/1-1.jpg" alt="img01"/></figure>
        <figure ><img src="img/2-2.jpg" alt="img05"/></figure>
        <figure ><img src="img/3-3.jpg" alt="img08"/></figure>
        <figure ><img src="img/4-4.jpg" alt="img02"/></figure>
        <figure ><img src="img/5-5.jpg" alt="img04"/></figure>
        <figure ><img src="img/6-6.jpg" alt="img03"/></figure>
        <figure ><img src="img/7-7.jpg" alt="img09"/></figure>
        <figure ><img src="img/8-8.jpg" alt="img06"/></figure>
        <figure ><img src="img/9-9.jpg" alt="img07"/></figure>

    </div>
</div><!-- /grid-wrap -->

CSS部分

.grid figure{background-color: black;}
.grid figure img {display: block;width: 100%;}
.grid figure img:hover {opacity: 0.6;transition: opacity 0.3s;}

我需要类似的东西： jqueryrain.com/?7Oza6nhx

Answer 1

您可以在this fiddle中看到它的实际效果为简单起见，我使用彩色框而不是图像，但您可以替换图像 HTML：

<div id="box_1" class="box">
    <div class="orange"></div>
</div>

的CSS：

.box {
    position: absolute;
    width: 200px;
    height: 200px;
}
#box_1 {
    background: #ee3e64;
    top: 0;
    left: 0;
}
.orange {
    visibility: hidden;
    background: #f95b34;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 25%;
    height: 25%;
}
#box_1:hover .orange {
    visibility: visible;
}

Answer 2

您可以在悬停时通过背景CSS为数字元素添加缩放图标。

.grid figure:hover {
    background: transparent url(images/search-128.png) no-repeat 0 0;
}

点击此处查看代码的工作示例：jsFiddle

Answer 3

如果要在现有图像上放置+ /缩放符号，则可以从父容器生成伪。

figure {
position:relative;
}
figure:before {
content:url(./myzoomsign.png)' and or my text';
position:absolute; 
z-index:1;/* to show on top of image */
/* top, right,bottom , left, to set where i want */
}

要显示example working with focus，您可以更新生成的内容。

Answer 4

也许给这个镜头in this fiddle

<div class="grid-wrap">
<div class="grid">
    <figure>
        <img src="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg"/>
        <img src="http://searchengineland.com/figz/wp-content/seloads/2012/04/penguin.jpg" class="hov" alt="img01"/>
    </figure>
</div>

CSS -

figure img {
    position: absolute;
    width: 293px;
    height: 170px;
}
img.hov {
    visibility: hidden;
}
figure:hover img.hov {
    visibility: visible;
    opacity : 0.4;
    z-index:1;
}

在图像css上显示图像

4 个答案: