HTML/CSS social button with sprite on hover - html

Question

Hello I am trying to create HTML/CSS button with next idea:
To run sprite animation on hover with a p-text over it.
Problem:
Animation appears on hover, but doesn't work.
P-text is hided, but doesn't appears on hover.
Fiddle: jsfiddle.net/6xgt5ko1/6/
HTML:
<div>
<p class="follow">Follow</p>
</div>
CSS:
div a {
width: 128px;
height: 128px;
margin: auto;
display: block;
background: url('http://s29.postimg.org/4yqcgdcbn/128.png');
background-repeat: no-repeat;
background-position: 0px 0px;
}
div a:hover {
width: 128px;
height: 128px;
background: url('http://s10.postimg.org/alazhqpu1/sprite.png');
background-position: 0px 0px;
animation-play-state: paused;
animation: play 5s steps(10) infinite;
transorm: translateZ(0);
}
#keyframes play {
from { background-position:0px 0px; }
to { background-position: 1280px 0px; }
}
.follow {
font-size: 18px;
font-weight: 300;
line-height: 150px;
text-align: center;
color: white;
display: none;
}
.follow:hover {
display: block;
}

Answer 1

To fix the <p> text issue.
Change this CSS Rule:
.follow:hover {
display: block;
}
to this:
div a:hover .follow {
display: block;
}

Answer 2

1) You need -wekbit prefixes for the animations to work in Safari. Also you set animation-play-state: paused; so the animation doesn't run. Not sure why that doesn't affect Chrome.
div a:hover {
animation-play-state: paused; // get rid of this
animation: play 5s steps(10) infinite;
-webkit-animation: play 5s steps(10) infinite;
transorm: translateZ(0);
-webkit-transorm: translateZ(0);
}
#-webkit-keyframes play {
from { background-position:0px 0px; }
to { background-position: 1280px 0px; }
}
2) Like #hopkins-matt said, to see the <p> on hover change the css to
div a:hover .follow {
display: block;
}