【问题标题】:how do i zoom several images on hover without changing its width and height?如何在悬停时缩放多个图像而不改变其宽度和高度?
【发布时间】:2021-03-01 11:48:17
【问题描述】:

我正在创建包含多个图像的画廊,并且在悬停时我希望它可以缩放图像而不缩放框。我正在使用引导程序 4。

<div class="row">
 <div class="col-12"><img class="galleryimg" src="images/3GALLERY-1A.jpg" width="100%" height="" alt=""/></div>
 <div class="col-12 "><img class="galleryimg" src="images/3GALLERY-2A.jpg" width="100%" height="" alt=""/></div></row>

css---------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------------------

img.galleryimg{
    width: 100%;
    transition: 0.4s ease;
    transform-origin: 50% 50%;}

img.galleryimg:hover{
    transform: scale(1.2);
    width: 100%;}

【问题讨论】:

标签: html css image animation zooming


【解决方案1】:

尝试更改此行:

transition: 0.4s ease;

transition: transform 0.4s ease;

这应该可以解决它。

编辑:对于显示的缩放效果,请尝试如下:

.col-12 {
  /* Change example sizes */
  height:100px;
  width:100px;
  overflow:hidden;
}

img.galleryimg{
    width: 100%;
    transition: transform 0.4s ease;
    transform-origin: 50% 50%;}

img.galleryimg:hover{
    transform: scale(1.2);
    width: 100%;}
<!-- Example image used -->
<div class="row">
  <div class="col-12"><img class="galleryimg" src="https://www.gravatar.com/avatar/ecad24d406a8b8fd5753363a4f691d9a?s=32&d=identicon&r=PG&f=1" width="100" height="100" alt="" /></div>
  <div class="col-12 "><img class="galleryimg" src="https://www.gravatar.com/avatar/ecad24d406a8b8fd5753363a4f691d9a?s=32&d=identicon&r=PG&f=1" width="100" height="100" alt="" /></div>
</div>

【讨论】:

  • 感谢您的回答。它仍然不是我想要的。它更像这个 youtube.com/watch?v=cE58HuipqjI 但我目前只是 img 缩放
猜你喜欢
  • 2011-04-09
  • 1970-01-01
  • 2013-04-05
  • 1970-01-01
  • 1970-01-01
  • 2021-10-25
  • 1970-01-01
  • 2014-12-21
  • 1970-01-01
相关资源
最近更新 更多