Question

我想知道当鼠标悬停在html上时，如何在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

Answer 1

使用最小标记考虑这个简单，干净和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;
}

Answer 2

这应该可以解决问题：

<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标记包含网址和图片。缩放按钮放在标签内，我将其保留为一个简单的空div标签，用于保存图像。标记悬停在a标记后，标记将显示图像。使用它的最佳方法是缩放按钮可以是透明的，只需放在图像的中间，您就不必担心任何JavaScript。

Answer 3

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

Answer 4

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

您可能需要以下内容：

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

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

4 个答案: