Transition not working on text

Question

I've added code to enlarge the text when it is moused over but it is not working. Can anyone see the reason why? Here is my jsfiddle. I don't think it matters but the font being used in the actual code is being loaded through font-face but I thought i should mention it.

    <style>
    .headerText {transition: all .2s ease-in-out;}
    .headerText:hover {transform: scale(2.1);}
    a.headerText {
       font-family: arial;
       font-weight:bold;
       font-style:none;
       font-size:28px; 
       text-decoration:none;
       text-align:center;  
       color:purple;
       white-space:nowrap;  
       margin-left:20px;
       line-height:1.6;   
    }
    a.headerText:hover {color:green;}
    </style>

    <span class="headerText"><a class="headerText" href="http://example.com">my link</a></span>

Andrzej Ziółek · Accepted Answer · 2018-07-01T13:53:43.793

Transform property doesn't apply on inline elements, and <span> is one of them.

Here you can see list of elements that can be transformed.

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS2]

an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, patternTransform or gradientTransform [SVG11].

Solution

Set the display property of the span to inline-block or block.

.headerText {
  display: inline-block;
  transition: all .2s ease-in-out;
}

.headerText:hover {
  transform: scale(2.1);
}

a.headerText {
  font-family: arial;
  font-weight: bold;
  font-style: none;
  font-size: 28px;
  text-decoration: none;
  text-align: center;
  color: purple;
  white-space: nowrap;
  margin-left: 20px;
  line-height: 1.6;
}

a.headerText:hover {
  color: green;
}

<span class="headerText">
  <a class="headerText" href="http://example.com">
    my link
  </a>
</span>

Transition not working on text

1 Answers1

Solution