无法完全缩放图像，并使用 overflow:hidden 工作

Question

我不确定我错过了什么，我以前做过几次，但今天一直在与这个特殊的问题作斗争 CSS。我希望图像放大，但保持在尺寸范围内，因此缩放效果与任何放大效果不同。我试图将 overflow:hidden 移到其他父项或子项中，但没有效果。我也尝试过显示设置。

有什么建议吗？上面是 JSfiddle link，下面是代码。感谢观看！

#purple-square {
  width: 355px;
  height: 255px;
  background-image: url("../img/website_cards/purple_card.png");
  border-radius: 10px;
}

#migraine-dentistry {
  width: 355px;
  height: 255px;
  background-image: url("../img/website_cards/migraine_dentistry_card.png");
  border-radius: 10px;
}
/* need position: relative in shell otherwisee the elements disappear */
#shell {
  margin: auto;
  width: 355px;
  height: 255px;
  position: relative;
  transform-origin: center;
  transition: 0.3s ease-in-out;
}

#shell:hover {
  transform: scale(1.2);
}

#container {
  width: 100%;
  overflow: hidden;
  display: inline-block;
  transition: 0.3s;
  margin: 0 auto;
}

#container div {
  position: absolute;
  left: 0;
  transition: 0.3s ease-in-out;
}

#container:hover {
  transition: ease-in-out 0.3s;
}

#container div.bottom:hover {
  opacity: 0;
}

这里是 HTML 设置：

<body>
    <div id="shell">
        <div id="container">
            <div id='purple-square' class="top"></div>
            <div id='migraine-dentistry' class="bottom"></div>
        </div>
    </div>
</body>

Answer 1

在我的步骤下方截取了完整的工作代码

删除不必要的元素删除紫色方块，因为它在想要的动画中从未出现过。
删除了完整的#container div.bottom:hover 部分。
删除了 css 中以 #shell 开头的所有样式，之后在 #container:hover 上触发动画。
主要问题 在#container:hover 动画后添加一个#migraine-dentistry，因此如果有人悬停容器，它会影响#migraine-dentistry 元素。 (#container:hover #mi.. {trans..})
在此 (#container:hov..) 元素中删除所有内容并
插入变换：缩放(1.2);
因为我们只想在用户悬停时进行缩放。
删除整个#container div {..} 样式元素，因为我们将直接将这些样式添加到#migraine-dentistry 元素。
在#container 中定义 px 值
> 宽度：355px； 和 高度：255px；
只是因为我们不再使用 #shell 元素了。还
> 设置 position: relative; and z-index: 2;
#migrain.. 元素在他的 parent 中。和
> 设置 border-radius: 15px;
用于造型。最后
>删除 display 和 transition 值
因为根本不需要它们。

last 在#migraine-de.. 样式中
>设置 宽度：100%； 和 高度：100%；
适合 div 到 parent。
> 删除 border-radius 标签
因为它是由#container 设置的
> 添加 过渡：0.3 秒 ease-in-out;
按照你想要的方式过渡。

#container {
  border-radius: 15px;
  width: 355px;
  height: 255px;
  overflow: hidden;
  z-index: 2;
  position: relative;
}
#container:hover #migraine-dentistry {
  transform: scale(1.2);
}
#migraine-dentistry {
  width: 100%;
  height: 100%;
  transition: 0.3s ease-in-out;
  background-image: url('https://images.unsplash.com/flagged/photo-1563248101-a975e9a18cc6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
}

<body>
    <div id="shell">
        <div id="container">
            <div id='migraine-dentistry' class="bottom"></div>
        </div>
    </div>
</body>

I know these long nights where you just can't get it done.

无法完全缩放图像，并使用 overflow:hidden 工作

Can't quite get image to scale, and use overflow:hidden to work

html

css

animation

frontend

css-animations