javascript - 从文本行中心转换

javascript - 从文本行中心转换,第1张

我将css应用于一行文本(font-size),但它从左侧动画,我希望它从中心动画。我正在使用Bootstrap框架,所以div是以vert / horiz为中心。

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发布的。

编辑 - 顶部图片是它现在所做的,底部图片是我想要它做的事情

javascript - 从文本行中心转换,enter image description here,第2张

最佳答案:

2 个答案:

答案 0 :(得分:1)

您可以尝试使用transform属性,而不是设置新的字体大小,因为您已将transform-origin设置为中心,所以该属性应该是正确的。

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

答案 1 :(得分:0)

试试这个。

http://codepen.io/Chevex/pen/bdRvvJ

.linkage:hover   .cat-icn {
  opacity: 1;
  transform: scale(3);
}

而不是为字体大小设置动画,而是为transform属性设置动画。然后在您的悬停规则中使用transform属性来调整元素的比例。

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复