Display Image Over Image 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 when hover the picture in

Solution 1:

You can see it in action in this fiddle
I used colored boxes instead of images for simplicity but you can just substitute images
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;
}

Solution 2:

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

Look here for an working example with your code: jsFiddle

Solution 3:

If it is to lay a +/zoom sign over an existing image, then a pseudo can be generated from parent container.

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

An example working with focus to show than you can update generated content.

Solution 4:

Maybe give this a shot 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;
}