CODEWITHSUNDEEP
phphtmlcss
Somdeb
Somdeb

Reputation: 87

How to show a zoom button over an image when mouse hovers over the image

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

Upvotes: 4

Views: 7164

Answers (4)

Mostafa Jaffal
Mostafa Jaffal

Reputation: 11

CSS:

 img {
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}

img:active {
    -webkit-transform: scale(2);
    transform: scale(2);
}

This is correct in CSS http://jsfiddle.net/8c7Vn/301/ || UP

also this CSS Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.pic{
    width:50px;
    height:50px;
}
.picbig{
    position: absolute;
    width:0px;
    -webkit-transition:width 0.3s linear 0s;
    transition:width 0.3s linear 0s;
    z-index:10;
}
.pic:hover + .picbig{
    width:200px;
}
</style>
</head>
<body>
<img class="pic" src="adam_khoury.jpg" alt="Adam">
<img class="picbig" src="adam_khoury.jpg" alt="Adam">

<img class="pic" src="heart.png" alt="heart">
<img class="picbig" src="heart.png" alt="heart">

<img class="pic" src="hardhat.jpg" alt="hardhat">
<img class="picbig" src="hardhat.jpg" alt="hardhat">
</body>
</html>

Upvotes: 0

rjb
rjb

Reputation: 9116

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

CSS Desk Screenshot

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

Upvotes: 2

Rob
Rob

Reputation: 1885

Edit: Just realized you don't want to resize the image on the page.

You will probably want something like:

<a class="ImageZoom" href="news_image/<?php echo $getrs['image']; ?>">
    <img src="yourimage.ext" height="40" width="40" />
    <div class="Zoom"><img src="images/zoom.jpg" /></div>
</a>

<style>
.ImageZoom{
    display:block;
    position:relative;
}
.ImageZoom:hover .Zoom {
    display:block;
 }
 .Zoom {
    display:none;
    position:absolute
    bottom:0;
    right:0;
 }
</style>

Upvotes: -2

nderjung
nderjung

Reputation: 1617

This should do the trick:

<style>
    a.image {
        display: block; /* So that you can set a size. */
        width: 100px;
        height: 100px;
    } a.image div.zoom {
        display: none;
        width: 100px;
        height: 100px;
        background-image: url(URL_TO_ZOOM_PICTURE);
        background-repeat: no-repeat;
        background-position: center center;
    } a.image:hover div.zoom {
        display: block;
    }
</style>

<a class="image" href="<?php echo $getrs['image']; ?>"
    style="background:URL(http://news_image/<?php echo $getrs['image']; ?>);">
    <div class=".zoom"><!-- --></div>
</a>

The a tag holds the URL and the image. The zoom button is placed within the tag, and I have left it as a simple empty div tag which holds the image. Once the a tag gets hovered over, the tag will appear showing the image. The best about using this is that the zoom button can be transparent, and be placed simply in the middle of the image, and you don't have to worry about any JavaScript.

Upvotes: 1

Related Questions