How to make an image appear over another image when mouse hovers with css3?

Question

Hey I would like a magnifying glass or some image to pop over another image when on mouseover like this website - http://www.elegantthemes.com/gallery/ When you hover over an image an image appears over it. Does anyone know how to achieve this?

Not sure if you need any code but here's my css for the img tag:

img {
width: 600px;
height: 342px;
border-radius: 1px;
}

They position an element directly over it, and then fade in the opacity on mouseover using jQuery. — Ohgodwhy, Jul 08 '12 at 15:58
[Here, this is the same code they used, I just used pure CSS with no jQuery to achieve it, however you'll see there's no `fadeIn animation`, just instantaneous display.](http://jsfiddle.net/5snqw/) — Ohgodwhy, Jul 08 '12 at 16:02

score 5 · Accepted Answer · answered Jul 08 '12 at 16:00

5

You can do it with

HTML

<div id="yourImage" ></div>

CSS

#yourImage {
 background-image: url('image1.jpg');
}


#yourImage:hover {
 background-image: url('overimage.jpg'), url('image1.jpg');
}

answered Jul 08 '12 at 16:00

Mateusz Rogulski

7,357
7
44
62

How do you center the hover image on to the actual image? – user1506962 Jul 09 '12 at 13:26
Each background which is separated by coma you can styled like normal background so you can use just " `...url('overimage.jpg') center, url...` – Mateusz Rogulski Jul 09 '12 at 13:36
This is pretty cool, I didn't even know css could do this! Gotta get rid of a lotta jquery i used to use haha – jemiloii Mar 07 '14 at 01:41

score 3 · Answer 2 · answered Jul 08 '12 at 15:59

3

There is a jquery plugin for this.

The first effect is what you're looking for.

answered Jul 08 '12 at 15:59

menislici

1,149
5
18
35

aww okay thank you, is it possible to do it with css3 only at all? – user1506962 Jul 08 '12 at 16:00
Well, yes you can but it won't be cross browser compatible as you know. My guess is to use an image behind the content div, and fade it in using [css3 transitions](http://www.w3schools.com/css3/css3_transitions.asp) on the container's opacity property – menislici Jul 08 '12 at 16:04
Click on the link I gave you, then find the download button in the page and download it. – menislici Jul 08 '12 at 16:17

Sidd · Answer 3 · 2012-07-08T16:07:57.293

3

You can try this. I think it uses only CSS.

edited Jul 08 '12 at 16:07

answered Jul 08 '12 at 16:01

Sidd

1,168
2
10
27

score 1 · Answer 4 · answered Jul 08 '12 at 16:00

1

You need to check the CSS position attribute, so you can have both elements on the same place. And then just chang the opacity of the hover image.

answered Jul 08 '12 at 16:00

André Catita

1,313
16
19

@André Catita It won't have the transitive effect though – menislici Jul 08 '12 at 16:06

score 0 · Answer 5 · answered Jul 08 '12 at 18:51

0

@Mateusz has the best answer, but I would improve upon that by adding the css transition something along the lines of this:

-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;

answered Jul 08 '12 at 18:51

imakeitpretty

2,108
5
16
16

Cheers man :) do you know how to centre the hover image over the actual image? At the moment it's at the top left – user1506962 Jul 09 '12 at 13:26

score 0 · Answer 6 · edited Jul 09 '12 at 11:57

Try this:

HTML:

<div class="your-img">
    <div class="your-hover"></div>
</div>

CSS:

.your-img {
    width: 300px; /* your image width and height here */
    height: 225px;
    background-image: url('../img/image_01.png');
}
.your-hover {
    width: 300px;
    height: 225px;
    opacity: 0;
    filter: alpha(opacity = 0);
    background-image: url('../img/image-hover_01.png');
}
.your-hover:hover {
    opacity: 0.5;
    filter: alpha(opacity = 50);
}

filter: alpha is for IE, I hope it helps.

How to make an image appear over another image when mouse hovers with css3?

6 Answers6

Linked