Icon pulsating effect in HTML5 with CSS

Question

I have an element

<a class="fa fa-user icon" href="#"></a>

My requirement is to have a pulsed effect whenever the mouse is on top of it.

My CSS is something like this.

.icon:hover{
    -webkit-animation: pulse 2s ease-in;
    -moz-animation: pulse 2s ease-in;
     animation: pulse 2s ease-in;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    opacity: 0.0;
 }
 25% {
    -webkit-transform: scale(1.35);
    opacity: 0.1;
 }
 50% {
    -webkit-transform: scale(1.7);
    opacity: 0.3;
 }
 75% {
    -webkit-transform: scale(2.05);
    opacity: 0.5;
 }
 100% {
    -webkit-transform: scale(2.4);
    opacity: 0.0;
 }
}

The effect works fine, but the original icon disappears. I want the original icon to remain visible when a pulsating effect happens, so that it stands out when a person holds the mouse on top of it.

Do I need to overlay the original div on the new icon?

JSFiddle available: https://jsfiddle.net/3bu8fxnp/9/

Answer 1

Updated Fiddle

You can add a second icon to the pseudo-element after.

.fa-user:after {
    content: "\f007";
    display: block;
}

.fa-user:before {
    position: absolute;
}

, .

.icon:hover:before {
    ...
}