how to show overflow section in hover element on iHover?

Question

I want show some details to my user when user hovering the IMG tag. for this purpose I use the iHover CSS and only change the overflow to auto. Because in some of my image the data I want show is overflowing from image and need scrollbar to show everything. but I do not want the scrollbar I want if the info is overflowing is show on the image, even if show beyond the img tag Borders and the min-width and min height should be 300px. for example in the first Picture you can see the scrollbar:

but I need something like this if it has overflow. the data is random:

this is my css code:

.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);
}

<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="https://picsum.photos/800/500"></div>
         <div class="info ">
             <!-- my info date is here-->



         </div>
     </div>

how can fix this?

Answer 1

I find my answer. after sum more try and error, I find the ih-item is the section for the IMG and the info tag. So I add this code:

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

now when the mouse on image and hover occurs, all of the data is show with out need scrolling in the image section.