After posting the question:
[Display image over image css](https://stackoverflow.com/questions/23483437/display-image-over-image-css/23485315)

I didn't solve the problem yet, but I will give you some updates that I came up with.

Look at this picture you will understand what i really want to do:
![http://www.shy22.com/upfiljpg/nac74671.jpg](https://i.stack.imgur.com/sa4NB.jpg)

I need that red box go to that green spot. 

When I try to change that hover box to `position:absolute` it becomes like this:
![http://www.shy22.com/upfiljpg/bth74604.jpg](https://i.stack.imgur.com/E8pls.jpg)

**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;
}

```