如何在iHover悬停元素中显示溢出内容（无滚动条且可超边框）

要实现悬停时内容超出图片边框且无滚动条、最小宽高300px的效果，直接修改以下几处CSS即可：

1. 解除父容器的溢出限制 #

原代码中.ih-item.square.effect13的overflow: hidden会裁剪超出图片范围的内容，直接移除这个属性：

.ih-item.square.effect13 {
  /* 移除 overflow: hidden; */
}

2. 重构info区域的定位与尺寸 #

修改.ih-item.square .info的样式，让它脱离图片容器的尺寸限制，同时设置最小宽高：

.ih-item.square .info {
  position: absolute;
  /* 替换原有的上下左右定位，改为居中显示 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 300px;
  min-height: 300px;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: visible; /* 替换 overflow: auto，去掉滚动条 */
  padding: 20px; /* 可选，增加内边距优化内容显示 */
}

3. 调整动画逻辑 #

原top_to_bottom动画是基于info与图片容器同尺寸设计的，现在info尺寸独立，需要修改动画的初始和hover状态：

.ih-item.square.effect13.top_to_bottom .info {
  /* 初始状态向上移出视野 */
  -webkit-transform: translate(-50%, -150%);
  -moz-transform: translate(-50%, -150%);
  -ms-transform: translate(-50%, -150%);
  -o-transform: translate(-50%, -150%);
  transform: translate(-50%, -150%);
}
.ih-item.square.effect13.top_to_bottom:hover .info {
  /* hover时回到居中位置 */
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

修改后的核心CSS片段 #

整合上述修改后的关键代码如下：

.ih-item.square.effect13 {
  /* 移除了 overflow: hidden */
}
.ih-item.square .info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 300px;
  min-height: 300px;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: visible;
  padding: 20px;
}
.ih-item.square.effect13.top_to_bottom .info {
  -webkit-transform: translate(-50%, -150%);
  -moz-transform: translate(-50%, -150%);
  -ms-transform: translate(-50%, -150%);
  -o-transform: translate(-50%, -150%);
  transform: translate(-50%, -150%);
}
.ih-item.square.effect13.top_to_bottom:hover .info {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

修改后，悬停时info区域会以图片为中心显示，内容可超出图片边框，无滚动条，且始终保持至少300px的宽高。

内容的提问来源于stack exchange，提问作者sadegh