1

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

6 Answers 6

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');
}
3
  • How do you center the hover image on to the actual image? Jul 9, 2012 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... Jul 9, 2012 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 7, 2014 at 1:41
3

There is a jquery plugin for this.

The first effect is what you're looking for.

3
  • aww okay thank you, is it possible to do it with css3 only at all? Jul 8, 2012 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 on the container's opacity property
    – menislici
    Jul 8, 2012 at 16:04
  • Click on the link I gave you, then find the download button in the page and download it.
    – menislici
    Jul 8, 2012 at 16:17
3

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

0
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.

1
  • @André Catita It won't have the transitive effect though
    – menislici
    Jul 8, 2012 at 16:06
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;
1
  • Cheers man :) do you know how to centre the hover image over the actual image? At the moment it's at the top left Jul 9, 2012 at 13:26
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.