значок перехода при наведении курсора

Question

Я этот код

.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 a { 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    height: 45px; 
 
    margin: 12px; 
 
    text-decoration: none; 
 
    text-indent: -9999px; 
 
    transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; 
 
    width: 45px; 
 
} 
 
/* Hide this */ 
 

 
.pictos > div .standard-hover { 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    height: 45px; 
 
    margin: 12px; 
 
    text-decoration: none; 
 
    text-indent: -9999px; 
 
    transition: all 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 a 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 a 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>

То, что я хочу, при наведении на ссылку, в белый значок телефона (как этот http://s30.postimg.org/3l9qho5h9/standard_hover.png) появляется снизу к зеленый круг. Это происходит, когда первый значок перемещается в верхнюю часть.

Спасибо за помощь.

Answer 1

Как это?

.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 two background images: */ 
 
    background-image: url("http://s11.postimg.org/91k4hiqe7/standard.png"), 
 
        url(http://s30.postimg.org/3l9qho5h9/standard_hover.png); 
 
    /* set positioning for them both individually: */ 
 
    background-position: 50% 50%, 50% 39px; 
 
} 
 
.pictos a.standard:hover, 
 
.pictos a.standard:focus { 
 
    /* when hovering, change background-color and both of the background-positions: */ 
 
    background-color: rgba(120, 182, 55, 1); 
 
    background-position: 50% -39px, 50% 50%; 
 
} 
 
/* end of new stuff, removed some other unnecessary rules also*/ 
 

 
.pictos > div a { 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    height: 45px; 
 
    margin: 12px; 
 
    text-decoration: none; 
 
    text-indent: -9999px; 
 
    transition: all 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 a 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 a 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>

Answer 2

Я начал с другого подхода, используя псевдоэлементы, чтобы содержать ваши значки и анимировать их при наведении.

Я также добавил <a> тег, чтобы позволить вам иметь текст, а

.wrap { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    background: lightgray; 
 
    border-radius: 10px; 
 
} 
 
.phone { 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    border: 10px solid gray; 
 
    position: relative; 
 
    overflow: hidden; 
 
    transition: all 0.6s; 
 
    margin: 0 auto; 
 
} 
 
.phone:before, 
 
.phone:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: url(http://s11.postimg.org/91k4hiqe7/standard.png) no-repeat center; 
 
    background-size: 60%; 
 
    height: 50px; 
 
    width: 50px; 
 
    transition: all 0.6s; 
 
} 
 
.wrap:hover .phone:before { 
 
    top: -100%; 
 
} 
 
.phone:after { 
 
    top: 100%; 
 
    background: url(http://s30.postimg.org/3l9qho5h9/standard_hover.png) no-repeat center; 
 
    background-size: 60%; 
 
} 
 
.wrap:hover .phone:after { 
 
    top: 0; 
 
} 
 
.wrap:hover .phone { 
 
    background: green; 
 
} 
 
a, span { 
 
    transition: all 0.6s; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    width: 80px; 
 
    height: 20px; 
 
    border-radius: 10px; 
 
    color: white; 
 
    text-align: center; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    margin-bottom:10px; 
 
} 
 
a span { 
 
    background: green; 
 
    opacity: 0; 
 
    display: inline-block; 
 
} 
 
.wrap:hover span { 
 
    opacity: 1; 
 
} 
 
span:before { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -5px; 
 
    left: 50%; 
 
    transform: translateX(-50%) rotate(45deg); 
 
    height: 10px; 
 
    width: 10px; 
 
    background: inherit; 
 
}

<div class="wrap"> 
 
    <a href="#"><span>Standard</span> 
 
    <div class="phone"></div> 
 
</a> 
 

 
</div>

Answer 3

Попробуйте это:

button { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    font-family: helvetica; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 60px; 
 
    height: 60px; 
 
    border: 1px solid lightgrey; 
 
    background-color: white; 
 
    border-radius: 50px; 
 
    border-width: 10px; 
 
    transition: all 1s; 
 
    overflow:hidden; 
 
} 
 
button:before{ 
 
    content:'☎'; 
 
    color: black; 
 
    font-size: 40px; 
 
    position: absolute; 
 
    top: -10px; 
 
    left: 6px; 
 
    transition: top 1s; 
 
} 
 
button:hover{ 
 
    background-color: green; 
 
} 
 
button:hover:before{ 
 
    top:-100px; 
 
} 
 
button:after{ 
 
    content:'☎'; 
 
    color: white; 
 
    font-size: 40px; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 7px; 
 
    transition: top 1s; 
 
} 
 
button:hover:after{ 
 
    top: -10px; 
 
}

<button />