CODEWITHSUNDEEP
htmlcsshover
user1506962
user1506962

Reputation: 207

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

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

Upvotes: 1

Views: 13381

Answers (6)

Emil A.
Emil A.

Reputation: 3445

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.

Upvotes: 0

imakeitpretty
imakeitpretty

Reputation: 2116

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

Upvotes: 0

Sidd
Sidd

Reputation: 1208

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

Upvotes: 3

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7445

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

Upvotes: 5

Andr&#233; Catita
Andr&#233; Catita

Reputation: 1323

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.

Upvotes: 1

menislici
menislici

Reputation: 1167

There is a jquery plugin for this.

The first effect is what you're looking for.

Upvotes: 3

Related Questions