<分区>
javascript - 如何使用纯 css 在悬停时放大图像？
标签 javascript jquery html css
我正在玩缩略图以在循环生成的特定表单上节省一些空间。问题是图像太小而无法引起注意，我不会牺牲几个像素，因为这些图像可以从几个到几十个。我的解决方案是在悬停时放大这些图像，同时保持简单。
我想说的(这些是我从 (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 做惊人的事情以来，我在这里很迷茫
最佳答案
我是个怀疑者，但我已经成功地仅使用 CSS 拼凑出了你想要的东西
https://jsfiddle.net/j2w27c6n/2/
img:hover ~ underlay{
top:0px;
left:100px;
width:300px;
height:300px;
}
如果你移动缩略图很容易，就像@Jim 的回答，但如果你需要缩略图和放大版本，你必须做一些技巧。我将 2 个图像放在彼此的顶部，当您将鼠标悬停在顶部的 img 上时，底部的 img 会变成放大的版本。
关于javascript - 如何使用纯 css 在悬停时放大图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35215471/