如何在鼠标悬停在图像上时在图像上显示缩放按钮

我想知道当鼠标悬停在图像上时如何在html图像上显示缩放按钮。到现在我已经尝试了本如何在鼠标悬停在图像上时在图像上显示缩放按钮

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

但这里的主要问题是，如何设置背景图片的大小，以及如何显示zoom.jpg当只有鼠标悬停它否则不是。当鼠标悬停在背景图像上时，如何将zoom.jpg放置在背景图像的右下角。

我以前曾问过这个问题，但当时我并不具体，但现在我已经试过了。

请帮我解决这个问题。

感谢 Somdeb

来源

2012-01-10 Somdeb

这应该做的伎俩：

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

的a标签保存URL和图像。缩放按钮放置在标签内，我已将其保留为容纳图像的简单空div标签。一旦a标签被悬停，标签就会出现，显示图像。使用它的最佳方式是缩放按钮可以是透明的，并且可以简单地放置在图像的中间，而且您不必担心任何JavaScript。

来源

2012-01-10 17:33:56 escproxy

非常感谢你也就迎刃而解了 – Somdeb 2012-01-11 15:59:22

-2

编辑：刚才意识到你不想调整页面上的图像大小。

你可能会想是这样的：

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

来源

2012-01-10 17:34:45 Rob

非常感谢你也就迎刃而解了 – Somdeb 2012-01-11 15:59:09

考虑一个简单，干净，elegant example使用最少的标记：

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

如果你宁愿只显示放大镜上:hover，更改CSS反映：

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

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

这将会把变焦图像在图像的中间在:hover。

作为额外的好处，您可以将鼠标光标更改为自定义图像（例如放大镜），进一步向用户建议图像可以放大。

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

来源

2012-01-10 18:32:55 rjb

非常感谢你也就迎刃而解了 – Somdeb 2012-01-11 15:59:30

CSS：

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

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

这是CSS http://jsfiddle.net/8c7Vn/301/正确|| UP

也是这个CSS例子：

<!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>

来源

2017-07-16 20:40:15

如何在鼠标悬停在图像上时在图像上显示缩放按钮

回答

相关问题