如何使图像在 div 中弹出答案

【问题标题】：How to make a image pop out inside a div如何使图像在 div 中弹出
【发布时间】：2020-10-28 22:14:24
【问题描述】：

我有一个包含图片的 div，我希望它们在我将鼠标悬停在它们上方时弹出，它们确实会弹出，但它们只在 div 内弹出，但我希望它们弹出到网站上。正如您在屏幕截图中看到的那样，将鼠标悬停在图片上后就看不到图片了。有谁知道如何解决这个问题？

这是我的图片和画廊的 CSS 代码

#gallery {
  width: 83%;
  margin:auto;
  height: 253px;
  display: flex;
  padding: 0 -8px;
  text-align: center;
  flex-wrap: wrap;
  background: #AAAAAA;
  overflow-y: scroll;
  border-style: solid;

}

#gallery img{
  float: left;
  position: relative;
  margin: 10px;
  width: 325px;
  height: 230px;
  transition: transform .5s;

}
#gallery img:hover{
   transform: scale(1.5);
 }

【问题讨论】：

标签： html css

【解决方案1】：

看看这个
这真的很简单，我将两个盒子包装到一个父 div 中，如果你在这里看到，悬停时盒子会弹出。我在这里只使用了简单的颜色，但您可以在这里使用您的图像。

.parent {
  display: flex;
  width: 400px;
  height: 400px;
  position: relative;
}

.child-box1 {
  background: cyan;
  height: 200px;
  width: 200px;
  transition: all 2s ease;
}
.child-box2 {
  height: 200px;
  width: 200px;
  background: orange;
  transition: all 2s ease;
}
.child-box1:hover,.child-box2:hover {
  transform: scale(1.3);
}

<div class="parent">
  <div class="child-box1"></div>
  <div class="child-box2"></div>
</div>

【讨论】：

【解决方案2】：

尝试在 img:hover 选择器上将 z-index 属性更改为更高的值。

我认为这个 Codepen 可能引用了您正在寻找的内容：https://codepen.io/ParsonsProjects/pen/OVgMGb

【讨论】：

hmm 我试过改了，还是在div里面跳出来，看不到图片