Using CSS transitions to reveal more digits in a number - css

Question

In HTML we have a number like 12.34 When someone hovers their mouse over it I'd like it to expand with some sort of transition to reveal additional significant digits, for example 12.345678.
Is this possible with just CSS and what would be the simplest way? (e.g. I probably don't want to use a fixed width div with overflow hidden, which then expands, because the width could be variable with numbers like 123.45, 1,234.56 etc.) So I'm thinking have two divs one rounded, one with all digits - but then we'd need some way to transition between them smoothly. Thanks!

Answer 1

I agree with Marc B - there are too many possible variations to determine the dot position to use just one field without resorting to using JS. However this is my solution, with two fields
http://jsfiddle.net/chrisdanek/mSjsj/1/
<span class="num">
<span class="abbr">123.45</span>
<span class="full">123.4567</span>
</span>
<span class="num">
<span class="abbr">123,345,567.45</span>
<span class="full">123,345,567.45000</span>
</span>
<span class="num">
<span class="abbr">123,345,567.455634434</span>
<span class="full">short one</span>
</span><!-- this one is not possible with numbers, but just to show how it works with shorter second number -->
And CSS
.num {
position: relative;
display: inline-block;
padding: 5px;
border: 1px solid red;
-webkit-transition: width 0.2s;
-moz-transition: width 0.2s;
-o-transition: width 0.2s;
transition: width 0.2s;
}
.abbr {
position: relative;
top: 0;
left: 0;
display: block;
opacity: 1;
z-index: 1;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.full {
top: 5px; left: 5px;
position: absolute;
display: block;
z-index: 0;
opacity: 0;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
color: red;
}
.num:hover .abbr { position: absolute; top: 5px; left: 5px; opacity: 0; z-index: 0; }
.num:hover .full { position: relative; top: 0; left: 0; opacity: 1; z-index: 1; }
The best I could come up with is opacity change, as it doesn’t require setting width on the container. Without that it’s impossible to make a transition for width (you’ll notice transition code is added, but it’s not being executed). Perhaps someone else can come up with a workaround.

Answer 2

I couldn't get the opacity transitions to work cleanly on our side for some reason. But this is a much simpler version in case it helps someone: (in SASS)
.num {
display: inline-block;
.abbr { display: block; }
.full { display: none; }
&:hover {
.abbr { display: none; }
.full { display: block; }
}
}