All geek questions in one place

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

I want to know how to show the zoom button above an image in html when the mouse hovers over it. so far i 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 how to set the size of the background image and how to show zoom.jpg when only the mouse does not freeze, otherwise. Also, how to place zoom.jpg in the lower right of the background image when the mouse hovers the background image.

I asked this question before, but at that time I was not specific, but now I was trying to be specific.

Please help me in this matter.

Thanks Somdeb

+4
source share
4 answers

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 prefer to show only a magnifying glass on :hover , change the CSS to display:

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

This will put 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 (for example, a magnifying glass), additionally prompting the user to enlarge the image.

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

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 contains the URL and image. The zoom button is placed inside the tag, and I left it as a simple empty div tag that contains the image. As soon as the a tag hangs, a tag appears showing the image. It’s best to use this so that the zoom button is transparent and just in the middle of the image, and you don’t have to worry about any kind of JavaScript.

+1
source

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

Edit: I just realized that you do not 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>
-2
source

Source: https://habr.com/ru/post/1390284/

More articles:


All Articles