当鼠标悬停在图像上时显示放大的图片答案

【问题标题】：Show enlarged picture when mouse hover over an image当鼠标悬停在图像上时显示放大的图片
【发布时间】：2018-09-24 02:17:32
【问题描述】：

在我的网页上，我想放一张图片，当鼠标指针悬停在该图片上时，会出现放大版。

【问题讨论】：

您所要做的就是创建一个翻转图像，当鼠标的位置在图像上的任何位置时，将图像的框架设置为您想要的大小。

标签： html image

【解决方案1】：

根据 cmets 中要求的进一步解释更新了 CSS 解决方案

http://jsfiddle.net/5sRTX/7/

<div class="effectback">
<img class="effectfront" src="https://farm8.staticflickr.com/7042/6873010155_d4160a32a2.jpg" />
</div>

attribution<br/>
https://secure.flickr.com/photos/34022876@N06/6873010155/sizes/m/in/photostream/

.effectback {
  display: block;
  background: url('https://farm8.staticflickr.com/7042/6873010155_d4160a32a2_s.jpg') no-repeat;
    margin: 0 auto;
}
.effectfront {
  opacity: 0;
  border: none;
  margin: 0 auto;
}
.effectfront:hover {
  opacity: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

基于原始问题的原始css解决方案

CSS 解决方案

http://jsfiddle.net/ERh62/1/

.effectscale {
  border: none;
  margin: 0 auto;
}
.effectscale:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

【讨论】：

谢谢。但是，我有两张图像，一张分辨率较低，另一张分辨率较高。我希望将较低分辨率的图像放在页面中，然后当用户将鼠标悬停在图像上时，会显示高分辨率版本。怎么做。
非常感谢。这看起来真的很不错。有没有办法让大弹出图像与小图像位于同一中心？

【解决方案2】：

<img src="..." onmouseover="this.width='someWidth'; this.height='someHeight'" onmouseout="this.width='originalWidth'; this.height='originalHeight'">

【讨论】：

【解决方案3】：

试试这个：

<html>
<head>
<style>
    .container{
        overflow:hidden;
        width:300px;/*change this to whatever you want*/
        height:150px;/*change this to whatever you want*/

        /*Of course, to get the desired effect, the size of the image "<img>" below must be larger than the size mentioned above*/
    }

    .container:hover{
        overflow:visible
    }
</style>

</head>
<body>
    <div class='container'><img src='myImage.png'/></div>
</body>

</html>

【讨论】：

为什么不使用相同的百分比而不是固定像素？一旦您使用可变图像/尺寸，固定的宽度和高度往往会创建扭曲的图像。