SOURCE

<div class="container">
	<div class="row" id="prodt-items">
		<div class="col-12 col-lg-6 col-xl-4">
			<div class="item-box py-3">
				<div class="item">
					<div class="img box-radius-all">
                        鼠标移动到上面来
						<!-- <img src="./assets/images/prod-item1.png" alt="product item 1"> -->
					</div>
					<div class="item-mask-text d-flex  justify-content-start flex-column py-3">
						<div class="d-flex h-100 justify-content-center flex-column ">
							<p class="fz-h3 text-center p-3">导航技能位居至高无上</p>
							<p class="fz-p1 text-center  p-3">
								<span class="d-inline-block">扫地机器人擅长穿越狭窄和混乱的房屋，
                    </span>
                    <span class="d-inline-block">在其他机器人害怕踩踏的地方大胆地进行清洁。</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
 </div>
</div>

@charset "utf-8";
#prodt-items {
  .item {
    display: block;
    height: 0;
    position: relative;
    padding-bottom: 83%;
    cursor: grab;
    ::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    &:hover {
      .img img {
        transform: scale(0.95);
        transition: all 0.32s;
      }
      .item-mask-text {
        opacity: 1;
        transition: all 0.32s;
      }
    }
    .img {
      position: absolute;
      overflow: hidden;
      left: 0;
      top: 0;
      width: 100%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.32s;
      }
    }
    .item-mask-text {
      transition: all 0.32s;
      opacity: 0;
      overflow-y: scroll;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      border-radius: 30px;
      z-index: 1;
      color: white;
      background: rgba($color: #000000, $alpha: 0.8);
    }
  }
}