无法完全缩放图像，并使用溢出：隐藏工作答案

【问题标题】：Can't quite get image to scale, and use overflow:hidden to work无法完全缩放图像，并使用溢出：隐藏工作
【发布时间】：2021-08-08 04:53:59
【问题描述】：

Here is a link to a demo

我不确定我错过了什么，我之前已经做过几次了，但是今天是与这个特殊的 CSS 作斗争的一天。我希望图像放大，但保持在尺寸范围内，因此缩放效果与任何放大效果相比。我试图将溢出：隐藏到其他父母或孩子中，但它没有效果。我也玩过显示设置。

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

#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>

【问题讨论】：

这能回答你的问题吗？ Zoom on image inside div without div moving

标签： html css animation frontend css-animations

【解决方案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; 和 z-index: 2;
#migrain.. 元素在他的父元素中。和
>设置边框半径：15px;
用于造型。最后
>移除 display 和 transition 值
因为根本不需要它们。

最后在#migraine-de.. 样式中
>设置宽度：100%；和高度：100%；
使 div 适合父级。
> 移除边框半径标签
因为它是由#container 设置的
>添加过渡：0.3秒缓进出；
如你所愿过渡。

#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>

我知道你无法完成这些漫长的夜晚。

【讨论】：

哇，感谢您的周到回复！唯一的问题是，我确实想转换成色卡，然后我会添加一个按钮和一些文本，所以我想保留它！
对不起，这里是更正：link希望这个链接是有效的，之前从未使用过jsfiddle.net?
我也做了一个内容：link