CODEWITHSUNDEEP
jqueryhtmlcssimage
user3604578
user3604578

Reputation: 13

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 the gallery,

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 part

.grid figure{background-color: black;}
.grid figure img {display: block;width: 100%;}
.grid figure img:hover {opacity: 0.6;transition: opacity 0.3s;}

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

Upvotes: 0

Views: 334

Answers (4)

SkuZ
SkuZ

Reputation: 1

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

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105893

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.

Upvotes: 0

Sebsemillia
Sebsemillia

Reputation: 9476

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

Upvotes: 1

MilkyTech
MilkyTech

Reputation: 1927

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

Upvotes: 1

Related Questions