Question

我还没有解决问题，但我会给你一些我想出的更新。

看看这张图片，你会明白我真正想做的事情：

我需要那个红色的盒子去那个绿点。

当我尝试将该悬停框更改为position:absolute时，它变为如下所示：

HTML

<div class="grid-wrap">
    <div class="grid">
        <figure data-scroll-reveal="enter left and move 50px over 2.13s">
            <img src="img/latest-work/1-1.jpg" alt="img01" />
            <img src="img/hover.png" class="hover-img" />
        </figure>
        <figure data-scroll-reveal="enter left and move 50px over 1.73s">
            <img src="img/latest-work/2-2.jpg" alt="img05" />
        </figure>
        <figure data-scroll-reveal="enter left and move 50px over 1.33s">
            <img src="img/latest-work/3-3.jpg" alt="img08" />
        </figure>
        <figure data-scroll-reveal="enter left and move 50px over 2.13s">
            <img src="img/latest-work/4-4.jpg" alt="img02" />
        </figure>
        <figure data-scroll-reveal="enter left and move 50px over 1.73s">
            <img src="img/latest-work/5-5.jpg" alt="img04" />
        </figure>
        <figure data-scroll-reveal="enter left and move 50px over 1.33s">
            <img src="img/latest-work/6-6.jpg" alt="img03" />
        </figure>
        <figure data-scroll-reveal="enter left and move 50px over 2.13s">
            <img src="img/latest-work/7-7.jpg" alt="img09" />
        </figure>
        <figure data-scroll-reveal="enter left and move 50px over 1.73s">
            <img src="img/latest-work/8-8.jpg" alt="img06" />
        </figure>
        <figure data-scroll-reveal="enter left and move 50px over 1.33s">
            <img src="img/latest-work/9-9.jpg" alt="img07" />
        </figure>
    </div>
</div>
<!-- /grid-wrap -->

CSS

.grid-wrap {
    margin: 10px auto 0;
    max-width: 1200px;
    width: 100%;
    padding: 0;
    -webkit-perspective: 1500px;
    perspective: 1500px;
}
.grid {
    position: relative;
    -webkit-transition: all 0.5s cubic-bezier(0, 0, 0.25, 1);
    transition: all 0.5s cubic-bezier(0, 0, 0.25, 1);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    text-align: center;
}
.grid figure, .grid .placeholder {
    width: 340px;
    height: 300px;
    border-radius: 5px;
}
.grid figure {
    margin: 10px;
    display: inline-block;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.grid figure {
    background-color: black;
}
.grid figure img {
    display: block;
    width: 100%;
}
.grid figure img.hover-img {
    position: relative;
}

Answer 1

你需要这样的东西

 <div class="parent">
     <img src="" class="child1">//this image will be placed above the below one
     <img src="" class="child2">
 </div>

 .parent{
         width:100px;
         height:100px;
         display:block;
         position relative;//this is important
        }
 .child1{
         width:100px;
         height:100px;
         position:absolute;//this will place the image with class ".child1" over the image with class "child2"
         display:block;
        }
  .child2{
          width:100px;
          height:100px;
          position relative;//this is not so important
          display:block;
         }

这应该达到你想要的目标

Answer 2

这是一个解决方案，不需要悬停图像，我用伪元素替换它：

<强> HTML ：

<div class="grid-wrap">
    <div class="grid">
        <figure data-scroll-reveal="enter left and move 50px over 2.13s">
            <img src="http://placehold.it/200x200.jpg" alt="img01" />
        </figure>
        <figure data-scroll-reveal="enter left and move 50px over 1.73s">
            <img src="http://placehold.it/200x200.jpg" alt="img05" />
        </figure>
    </div>
</div>

<强> CSS ：

.grid-wrap {
    margin: 10px auto 0;
    max-width: 1200px;
    width: 100%;
    padding: 0;
    -webkit-perspective: 1500px;
    perspective: 1500px;
}
.grid {
    position: relative;
    -webkit-transition: all 0.5s cubic-bezier(0, 0, 0.25, 1);
    transition: all 0.5s cubic-bezier(0, 0, 0.25, 1);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    text-align: center;
}
.grid figure, .grid .placeholder {
    width: 200px;
    height: 200px;
    border-radius: 5px;
}
.grid figure {
    margin: 10px;
    display: inline-block;
    position:relative;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.grid figure {
    background-color: black;
}
.grid-img {
    display:block;
    width:100%;
    height:100%;
}
figure:after {
    display:none;
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url('http://soluciones.infonova.es/Portals/2/RECURSOS/GestionIntegral/Asesoramiento/seleccion.png') no-repeat;
    opacity:.5;
    border:1px solid red;
}
figure:hover:after {
    display:inline;
}

这是 FIDDLE 。

Answer 3

我更倾向于使用伪元素而不是HTML中的图像

基本HTML

<figure>
    <img src="http://lorempixel.com/output/city-q-c-200-200-6.jpg" />
</figure>

<强> CSS

figure {
    background-color: black;
    display: inline-block;
    position: relative;
}

figure:after {
    position: absolute;
    content:"";
    top:0;
    left:0;
    height:100%;    
    width:100%;
    background-color: rgba(0,0,0,0.0);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    transition:all .25s ease;  
}

figure:hover:after {
    background-color: rgba(0,0,0,0.25);
    background-image: url(http://iconbug.com/data/59/128/073a9e305ecf2fd8a953db5d5db2881f.png);
}

figure img {
    display: block;
    width: 100%;
}

JSfiddle Demo

在图像CSS上显示图像（2）

3 个答案: