图片库胡佛效果

Question

我有零编程知识，但我正在建立一个网站使用HTML代码。我在这个网站上有一个图片库，我找到了一些代码来创建吸盘效果。当您将鼠标悬停在图像上时，将出现一个深色但透明的框，其中一些文本是可调整的。对我来说，问题是文本在每个图像上的位置取决于文本的数量。如果有很多文本，文本将从左侧的固定距离开始。但如果文本很少，它将集中在一起。我正在尝试调整代码，使文本从左侧的固定距离开始，而与文本的数量无关。

我希望我的问题已经清楚了，我想肯定有一个简单的解决方案。来自CSS的代码如下：

.image-gallery .gallery_card > a {
    position: relative;
}

.image-gallery .gallery_card .gallery_image_caption {
    background: rgba(0, 0, 0, 0.6);
    padding: 0.4rem 0.4rem 0.4rem 1.0rem;
    margin: 0.8rem;
    color: rgba(255, 255, 255, 1);
    align-content: center;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    opacity: 0;
}

.image-gallery .gallery_image_caption span {
    margin: auto;
    display: inline-block;
}

.image-gallery .gallery_card:hover .gallery_image_caption {
    opacity: 1;
}

body.mobile .image-gallery .gallery_card:hover .gallery_image_caption {
    opacity: 0;
}

.gallery_card {
    position: relative;
}

.gallery_image_caption {
    pointer-events: none !important;    
}

Answer 1

只需将缩放类分配给图像

* {
  box-sizing: border-box;
}

.zoom {
  padding: 50px;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}