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:

<divid="box_1"class="box"><divclass="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.

.gridfigure:hover {
    background: transparent url(images/search-128.png) no-repeat 00;
}

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">
<divclass="grid"><figure><imgsrc="http://thefinishedbox.com/files/freebies/hoverzoom/images/thumbnail-3.jpg"/><imgsrc="http://searchengineland.com/figz/wp-content/seloads/2012/04/penguin.jpg"class="hov"alt="img01"/></figure></div>

CSS -

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