Pure css gradually change text on hover - html

Question

I'm trying to gradually change an element's text while hovering, however it's not working for me.
I have this CSS:
.author-details > div a {
display: inline-block;
width: 30%;
float: none !important;
background-color: #1ABC9C;
color: #fff;
padding: 2% 3% 2% 3%;
border-radius: 7%;
font-weight: normal;
font-size: 16px;
-webkit-transition: background 0.35s linear;
-moz-transition: background 0.35s linear;
-ms-transition: background 0.35s linear;
-o-transition: background 0.35s linear;
transition: background 0.35s linear;
-webkit-box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
}
.author-details > div a:after {
content: 'Others';
}
.author-details > div a:hover {
background-color: #5DADE2;
}
.author-details > div a:hover:after {
-webkit-animation:fade-in 0.35s ease-in;
}
#-webkit-keyframes fade-in{
0%{
opacity:1;
top:0px;
}
50%{
opacity:0;
top:-5px;
content: 'Me';
}
100%{
opacity:1;
top:-5px;
}
}
And this HTML:
<div><label>View as: </label> </div>
However when I'm hovering on the element the text doesn't change. I want to make it change to "Me" when I'm hovering over it and return to "Others" when I'm not. How can I do that?
Here's a jsFiddle: http://jsfiddle.net/2fgy912p/

Answer 1

Code: http://codepen.io/anon/pen/Qbdvob
This effect works by using hover state to set opacity of absolutely positioned elements' opacity on and off. And they have transition applied so fade in and out effect is achieved.
Jade styled html:
.widget
span view as:
input(type='checkbox',id='toggle')
label.select(for='toggle')
.default others
.hovered you
Css:
* {
margin: 0;
padding: 0;
}
.widget {
font-family: Open Sans;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.widget span {
vertical-align: top;
line-height: 30px;
}
label.select {
user-select: none;
cursor: pointer;
background-color: #3ce;
color: #fff;
border-radius: 2px;
width: 60px;
vertical-align: top;
position: relative;
height: 30px;
display: inline-block;
}
label.select .default,
label.select .hovered {
transition: opacity 1s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
}
label.select .hovered {
opacity: 0;
}
label.select:hover {
background-color: #36f;
}
label.select .default {
opacity: 1;
}
label.select .hovered {
opacity: 0;
}
label.select:hover .default {
opacity: 0;
}
label.select:hover .hovered {
opacity: 1;
}

Answer 2

You're not defining text to replace when hover the link. Should be:
.author-details > div a:after {
content: 'Others';
}
.author-details > div a:hover:after {
content: 'Me';
}
FIDDLE: https://jsfiddle.net/lmgonzalves/2fgy912p/3/
EDIT1:
I make a few changes to add transitions. See if this is want you want: https://jsfiddle.net/lmgonzalves/2fgy912p/7/
EDIT2:
I hardcoded the top property on each element, that should work, although I see working fine. Check: https://jsfiddle.net/lmgonzalves/2fgy912p/9/