How to display a zoom button on an image when the mouse appears on the image

advertisements

I want to know how to show a zoom button over an image in html when mouse hovers over it. till now i have tried this

<a href="news_image/<?php echo $getrs['image']; ?>"><img src="images/zoom.jpg" width="40" height="40" border="0" style="background:URL(http://news_image/<?php echo $getrs['image']; ?>) ;" /></a>

But here the main problem is that how to set size of the background image and how to show the zoom.jpg when only mouse hovers it otherwise not. Also how to place the zoom.jpg in the lower right hand side of the background image when mouse hovers the background image.

I had asked this question before but i was not specific at that time but now i had tried to be specific.

Please help me in this matter.

Thanks Somdeb


Consider this simple, clean and elegant example using minimal markup:

HTML:

<a href="#" class="zoom">
    <span></span>
    <img src="/path/to/image.jpg" />
</a>

CSS:

.zoom {
    border: 5px solid #000;
    display: inline-block;
    position: relative;
}

.zoom span {
    background: url(http://i.imgur.com/T7yFo.png) no-repeat;
    bottom: 0;
    display: block;
    height: 20px;
    position: absolute;
    right: 0;
    width: 20px;
}

img {
    height: auto;
    max-width: 100%;
}

If you'd rather only show the magnifying glass on :hover, change the CSS to reflect:

.zoom span {
    ...
    display: none;
    ...
}

.zoom:hover span {
    display: block;
    right: center;
    top: center;
}

This will place the zoom image in the middle of the image on :hover.

As an added bonus, you can change the mouse cursor to a custom image (e.g. a magnifying glass), further suggesting to the user that the image can be enlarged.

.zoom img:hover {
    cursor: url(http://i.imgur.com/T7yFo.png), -moz-zoom-in;
}