如何在 iHover 上的悬停元素中显示溢出部分？

Question

嗨，当用户将鼠标悬停在 IMG 标签上时，我想向用户显示一些详细信息。为此，我使用 iHover CSS 并将溢出更改为自动。因为在我的一些图像中，我想要显示的数据从图像中溢出，需要滚动条来显示所有内容。 但我不希望在信息溢出时在图像上显示我想要的滚动条，即使显示超出 img 标签边框，并且最小宽度和最小高度应为 300px。 例如，在第一张图片中，您可以看到滚动条：

但是如果它溢出了，我需要这样的东西。数据是随机的：

这是我的CSS代码：

.ih-item {

    position: absolute;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ih-item a {
  color: #333;
}
.ih-item a:hover {
  text-decoration: none;
}
.ih-item img {
    --widthValue: var(--width);
    --heightValue: var(--height);
    width: var(--widthValue);
    height: var(--heightValue);
}
    .ih-item.square {
        --topValue: var(--top);
        --leftValue: var(--left);
        --widthValue: var(--width);
        --heightValue: var(--height);
        --colorValue: var(--color);
        position: absolute;
        top: var(--topValue);
        left: var(--leftValue);
        width: var(--widthValue);
        height: var(--heightValue);
        /*    border: 2px solid black*/
        border-width: 2px;
        border-style: solid;
        border-color: var(--colorValue);
        border-radius: 10px;
        cursor: pointer;
    }
        .ih-item.square .info {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            overflow: auto;
        }

.ih-item.square.effect13 {
  overflow: hidden;
}
.ih-item.square.effect13.colored .info {
  background: #1a4a72;
  background: rgba(26, 74, 114, 0.8);
}
.ih-item.square.effect13.colored .info h3 {
  background: rgba(12, 34, 52, 0.5);
}
.ih-item.square.effect13 .img {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.ih-item.square.effect13 .info {
  background: #333333;
  background: rgba(0, 0, 0, 0.6);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
    .ih-item.square.effect13 .info h3 {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        font-size: 20px;
        background: #111111;
        margin: 10px 0 10px 0;
        padding: 5px 0 5px 0;
      
    }
    .ih-item.square.effect13 .info p {
        font-size: 20px;
        position: relative;
        width:100%;
        color: whitesmoke;
        padding: 0px 0px 5px 0px;
        margin: 5px 0px 5px 0px;
        text-align: center;

    }
.ih-item.square.effect13:hover .img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
.ih-item.square.effect13:hover .info {
  visibility: visible;
  opacity: 1;
}

.ih-item.square.effect13.top_to_bottom .info {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.ih-item.square.effect13.top_to_bottom:hover .info {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

这是我的 html:

     <div class="ih-item square colored effect13 top_to_bottom   aos-init"
      style="--top: calc(@startY * 1px) ; --left:calc(@startX * 1px) ;
         --width: calc(@width * 1px) ; --height: calc(@height * 1px) ;
         --color: @color ;" data-aos="@randomAnimaation">
     <div class="img"><img src="~/assets/adsimage/@image"></div>
     <div class="info ">
         <!-- my info date is here-->



     </div>
 </div>

如何解决这个问题？

Answer 1

我找到了答案。 经过更多的尝试和错误之后，我发现 ih-item 是 IMG 和 info 标签的部分。所以我添加了这段代码：

  .ih-item:hover {
         min-width: 200px;
         min-height: 270px;
     }  

现在，当鼠标放在图像上并悬停时，所有数据都会显示，无需在图像部分滚动。