如何使用纯css在悬停时放大图像？

Question

我正在使用缩略图来节省循环生成的特定表单上的一些空间。问题是图像太小而无法引起注意，我不会牺牲几个像素，因为这些图像可以从几个到几十个。我的解决方案是在悬停时放大这些图像，同时保持简单。

我想说的是什么（这些是我从（c）互联网获得的随机图片）

HTML对应

{{#answers}}

<div class="picture-caption">
    <div class="image">
        <img id="{{id}}" class="img-container" src="./data/picture_caption/{{picture_caption}}" alt="your image" onerror="if (this.src != './data/picture_caption/no_image.png') this.src = './data/picture_caption/no_image.png';" />
        <input id="image-value" data-id="{{id}}" class="image-box-{{id}}" type="file" style="display: none;" value=" {{picture_caption}}" />
    </div>
</div>

{{/answers}}

CSS对应

.picture-caption {
  float: right;
  width: 15%;
}

.img-container {
    margin-left: 14px;
}
.picture-caption img.img-container {
  width: 100%;
  height: auto;
}

.picture-caption {
    width: 70px;
    height: 45px;
    overflow: hidden;
}

.image {
    width: 100%;
    height: 100%;    
}

.image img {
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -moz-transition: all 0.5s ease; /* Firefox */
    -o-transition: all 0.5s ease; /* IE 9 */
    -ms-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease;
}

.image:hover img {
    width: 100%;
    height: 100%;
    -webkit-transform:scale(3); /* Safari and Chrome */
    -moz-transform:scale(3); /* Firefox */
    -ms-transform:scale(3); /* IE 9 */
    -o-transform:scale(3); /* Opera */
     transform:scale(3);
}

我刚刚开始学习CSS，我知道css3可以用html5

做出惊人的事情。

Answer 1

我是一个怀疑者，但我已经设法通过CSS将你想要的东西混在一起

https://jsfiddle.net/j2w27c6n/2/

img:hover ~ underlay{
  top:0px;
  left:100px;
  width:300px;
  height:300px;
}

如果您移动缩略图很容易，就像@ Jim的答案一样，但如果您需要缩略图和放大版本，则必须做一些诡计。我将2张图片放在彼此的顶部，当你将鼠标悬停在顶部img时，底部img就变成了放大版本。

Answer 2

这只是插图和
请参阅以下代码：

.image:hover img {
    width: 100%;
    height: 100%;
    -webkit-transform:scale(3); /* Safari and Chrome */
    -moz-transform:scale(3); /* Firefox */
    -ms-transform:scale(3); /* IE 9 */
    -o-transform:scale(3); /* Opera */
     transform:scale(3);
}

在position:absolute;内添加.image:hover img { ...}并根据您的需要添加top和left，包括您预期的更大图片。

Answer 3

请查看这个小提琴：

https://jsfiddle.net/jimedelstein/xjc154wz/1/

CSS最终看起来像这样：

.picture-caption {
  float: right;
  width: 15%;
}

.img-container {
  margin-left: 14px;
}

.picture-caption img.img-container {
  width: 70px;
  height: 45px;
}

.picture-caption {
  width: 70px;
  height: 45px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
}

.image img {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.image:hover img {
  position: absolute;
  top: 60px;
  right: 0;
  width: 210px;
  height: 135px;
}

这或多或少是@ herman-nz所暗示的。可以采取更多措施来改进解决方案，但我认为这与您正在寻找的方式相符。