javascript - 从文本行中心变换

Question

我已将变换 css 应用于一行文本(字体大小)，但它从左侧开始动画，我希望它从中心开始动画。我正在使用 Bootstrap 框架，所以 div 是垂直/水平居中的。

HTML

<article class="col-md-12">
   <div class="lg-indx-img">
    <a href="..." class="linkage"></a>
    <div class="cat-icn">
        <?php the_title(); ?>
    </div>
  </div>
</article>

CSS

article {
    position: relative;
    margin-bottom: 10px;
    width: 100%;
}

.linkage {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.lg-indx-img { padding: 20% 0; }

.cat-icn {
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 50%;
    opacity: 0;
    font-size: 15px;
    color: #fff;
    text-align: center;
    transform-origin: 50% 50%;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.linkage:hover + .cat-icn {
    opacity: 1;
    font-size: 25px;
}

当 .linkage 悬停时，.cat-icn 中的标题会增大。我不知道文本行的长度，因为它是由 Wordpress post 生成的。

编辑 - 上面的图片是它现在做的，下面的图片是我想要它做的

Answer 1

您可以尝试使用 transform 属性，而不是设置新的字体大小，它应该做正确的事情，因为您已经将 transform-origin 设置为中心.

.linkage:hover + .cat-icn {
  transform: scale(1.5);
}