I really need a help from an expert here!
I have a photo. On that photo i placed a circles with numbers using css absolute positions.
When the user mouse-over a circle the circle expands around 1.5 times (e.g. the initial size of a circle is 16px on 16px and it grows to 24px on 24px.
The number on the circles are horizontally center-aligned using the css text-align:center.
When the circle expands the numbers should also be vertically align.
I tried varied options using padding-top and or increasing line-height but nothing seem to work smoothly.
Here is just a part of the script i am using to expand the circle. If you have a good idea i would be thankful!
$position = $(this).position();
top: ($position.top - (8/2)), left: ($position.left -(8/2))}, 100);
top: $position.top, left: $position.left}, 100);