transform from center of text line

Question

I have transform css applied to a line of text (font-size), but it animates from the left side, I want it to animate from the center. I am using Bootstrap framework so the div is vert/horiz centred.

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

when .linkage is hovered the title in .cat-icn increases in size. I don't know the length of the text line since it's generated by Wordpress post.

EDIT - The top picture is what it does now, the bottom picture is what I want it to do

Answer 1

Instead of setting a new font size, you can try using the transform property, which should do the right thing since you have transform-origin already set to the center.

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

Answer 2

Try this out.

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

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

Instead of animating the font size, animate the transform property instead. Then in your hover rule use the transform property to adjust the scale of the element.