.my-marker1 span {
padding-bottom: .2em;
background: -webkit-linear-gradient(left, #ffe653 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
background: linear-gradient(to right, #ffe653 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
-webkit-transition: background-position 1.0s ease-out;
transition: background-position 1.0s ease-out;
}
.my-marker1:hover span {
background-position: 0% bottom;
}
.my-marker2 span {
padding-bottom: .2em;
background: -webkit-linear-gradient(left, #ffc0cb 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
background: linear-gradient(to right, #ffc0cb 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
-webkit-transition: background-position 1.0s ease-out;
transition: background-position 1.0s ease-out;
}
.my-marker2:hover span {
background-position: 0% bottom;
}
.my-marker3 span {
padding-bottom: .2em;
background: -webkit-linear-gradient(left, #87ceeb 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
background: linear-gradient(to right, #87ceeb 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
-webkit-transition: background-position 1.0s ease-out;
transition: background-position 1.0s ease-out;
}
.my-marker3:hover span {
background-position: 0% bottom;
}