javascript - Transition icon when hover -

i've code

.pictos {    display: block;    height: 70px;    margin: 160px 0 30px;    padding: 0 17%;    width: 100%;  }  .pictos > div {    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);    border: 1px solid #fff;    border-radius: 50%;    display: table-row;    float: left;    height: 70px;    width: 70px;    margin: 0 0 0 50px;  }  .pictos a.standard:hover,  .pictos a.standard:focus {    background: url("http://s11.postimg.org/91k4hiqe7/standard.png") no-repeat scroll 50% -39px rgba(120, 182, 55, 1);  }  .pictos > div {    border-radius: 50%;    display: inline-block;    height: 45px;    margin: 12px;    text-decoration: none;    text-indent: -9999px;    transition: 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;    width: 45px;  }  /* hide */    .pictos > div .standard-hover {    border-radius: 50%;    display: inline-block;    height: 45px;    margin: 12px;    text-decoration: none;    text-indent: -9999px;    transition: 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;    width: 45px;  }  .pictos > div:first-child {} .pictos a.standard {    background: url("http://s11.postimg.org/91k4hiqe7/standard.png") no-repeat scroll 50% 50% rgba(255, 255, 255, 1);  }  .pictos a.standard:hover span,  .pictos a.standard span:hover,  .pictos a.standard span:focus,  .pictos a.standard:focus span {    display: block;    opacity: 1;  }  .pictos span::after {    -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    border-color: #78b637 rgba(120, 182, 55, 0) rgba(120, 182, 55, 0);    border-image: none;    border-style: solid;    border-width: 6px;    content: " ";    height: 0;    left: 50%;    margin-left: -6px;    pointer-events: none;    position: absolute;    top: 100%;    width: 0;  }  .pictos span {    background: none repeat scroll 0 0 #78b637;    border: medium none;    border-radius: 9px;    bottom: 50px;    color: #efefef;    font-family: "montserrat-regular", sans-serif;    font-size: 13px;    padding: 5px 0;    position: relative;    right: 77px;    text-align: center;    text-decoration: none;    text-indent: 0;    text-transform: uppercase;    width: 200px;  }

<div class="pictos">    <div>      <a href="#" class="standard">        <span>standard</span>      </a>      <a href="#" class="standard-hover">        <span>standard</span>      </a>    </div>  </div>

what want when hover link, white icon phone (like http://s30.postimg.org/3l9qho5h9/standard_hover.png) appears bottom green circle. happens when first icon moving top.

thanks help.

like this?

.pictos {    display: block;    height: 70px;    margin: 160px 0 30px;    padding: 0 17%;    width: 100%;  }  .pictos > div {    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);    border: 1px solid #fff;    border-radius: 50%;    display: table-row;    float: left;    height: 70px;    width: 70px;    margin: 0 0 0 50px;  }    /* new stuff: */  .pictos a.standard {    background-repeat: no-repeat;    background-color: rgba(255, 255, 255, 1);    /* set 2 background images: */    background-image: url("http://s11.postimg.org/91k4hiqe7/standard.png"),                       url(http://s30.postimg.org/3l9qho5h9/standard_hover.png);    /* set positioning them both individually: */    background-position: 50% 50%, 50% 39px;  }  .pictos a.standard:hover,  .pictos a.standard:focus {    /* when hovering, change background-color , both of background-positions: */    background-color: rgba(120, 182, 55, 1);    background-position: 50% -39px, 50% 50%;  }  /* end of new stuff, removed other unnecessary rules also*/    .pictos > div {    border-radius: 50%;    display: inline-block;    height: 45px;    margin: 12px;    text-decoration: none;    text-indent: -9999px;    transition: 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;    width: 45px;    position:relative;  }  .pictos a.standard:hover span,  .pictos a.standard span:hover,  .pictos a.standard span:focus,  .pictos a.standard:focus span {    display: block;    opacity: 1;  }  .pictos span::after {    -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    border-color: #78b637 rgba(120, 182, 55, 0) rgba(120, 182, 55, 0);    border-image: none;    border-style: solid;    border-width: 6px;    content: " ";    height: 0;    left: 50%;    margin-left: -6px;    pointer-events: none;    position: absolute;    top: 100%;    width: 0;  }  .pictos span {    background: none repeat scroll 0 0 #78b637;    border: medium none;    border-radius: 9px;    color: #efefef;    font-family: "montserrat-regular", sans-serif;    font-size: 13px;    padding: 5px 0;    position: relative;    text-align: center;    text-decoration: none;    text-indent: 0;    text-transform: uppercase;    width: 200px;    position:absolute;    top:-50px;    left:-77px;    opacity:0;    height:16px;    transition:opacity .4s;  }

<div class="pictos">    <div>      <a href="#" class="standard">        <span>standard</span>      </a>    </div>  </div>