Touchpoints on mouseover - 2 issues - html

Question

I'd like to implement small circles (touch points) with a onmouse over effect (circles would become bigger on mouse over and contain a few lines of text) - see jsfiddle http://jsfiddle.net/eRDy6/1/
I've tried to adapt some code found on the web but struggling to do 2 things:
I can't get the word "read" centered (vertically and horizontally) to the middle of the circles. How could I achieve this.
I'd like a different text to be displayed onmouse over in the big circles. What would be the best way to do this?
Many thanks for your help
<div class="middle clear">
<div id="touchPointContainer">
<div id="touchPoint1" class="touchPoint">
<p>read</p>
</div>
<div id="touchPoint2" class="touchPoint">
<p>read</p>
</div>
<div id="touchPoint3" class="touchPoint">
<p>read</p>
</div>
</div>
</div><!-- End DIV Middle clear -->
CSS:
.middle {
display: block;
clear: both;
margin-right: auto;
margin-left: auto;
width: 980px;
background: red;
box-shadow: 0px 0px 10px 2px #e0e0e0;
-webkit-box-shadow: 0px 0px 10px 2px #e0e0e0;
-moz-box-shadow: 0px 0px 10px 2px #e0e0e0;
}
#touchPointContainer {
height: 600px;
background: green;
position: relative;
}
.touchPoint {
height: 60px;
width: 60px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
position: absolute;
text-align: center;
color: #5bb6e7;
font-size: 12px;
-webkit-transition: width .2s, height .2s, margin .2s;
-moz-transition: width .2s, height .2s, margin .2s;
-o-transition: width .2s, height .2s, margin .2s;
-ms-transition: width .2s, height .2s, margin .2s;
transition: width .2s, height .2s, margin .2s;
}
.touchPoint:hover {
height: 160px;
width: 160px;
margin: -40px 0px 0px -40px;
-webkit-transition: width .2s, height .2s, margin .2s;
-moz-transition: width .2s, height .2s, margin .2s;
-o-transition: width .2s, height .2s, margin .2s;
-ms-transition: width .2s, height .2s, margin .2s;
transition: width .2s, height .2s, margin .2s;
}
#touchPoint1 {
top: 260px;
left: 140px;
}
#touchPoint2 {
top: 240px;
left: 360px;
}
#touchPoint3 {
top: 180px;
left: 720px;
}

Answer 1

To vertically center text we need to set display: table-cell to the element and display: table to its container.
To switch contents on hover, you can make an hidden text element and show it when the container is being hovered (and hide the first one).
So to do what you want, add these classes:
.touchPoint {
display: table;
}
.touchPoint p {
vertical-align: middle;
display: table-cell;
}
.touchPoint .final,
.touchPoint:hover .initial {
display: none;
}
.touchPoint .initial,
.touchPoint:hover .final {
display: table-cell;
}
jsFiddle Demo