在图像css上显示图像 [英] Display image over image css

问题描述

使用css ...翱翔时

What's the easy way to make an image display image over image when hover

时，使图像显示图像的简单方法是什么。我需要为我的图库执行此操作，将鼠标悬停在图库中的图片时，会显示缩放图标

using css.. i need to do it for my gallery so i can put like a ZOOM icon show up

我需要在此处执行： / p>

I need to do it here:

<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

I need something similar to this: jqueryrain.com/?7Oza6nhx

推荐答案

您可以通过悬停时的背景CSS为图形元素提供缩放图标。

You could just give the figure element your zoom icon via background CSS on hover.

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

在这里查看您的代码的工作示例： jsFiddle

Look here for an working example with your code: jsFiddle

这篇关于在图像css上显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！