How to make an image appear over another image whe

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

Answer 1

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

Answer 2

There is a jquery plugin for this.

The first effect is what you're looking for.

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

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