Symbol schweben Übergang verringern

Question

Beim Schweben benutze ich Übergang für glatte Symbolerhöhung. Aber das Problem ist, dass, wenn ich die Maus aus dem Symbol ziehe, es sofort zu normaler Größe zurückkehrt. Ich bin mir nicht sicher, wie ich das gleiche mit Icon-Abnahme machen kann. Ich meine, wenn ich die Maus aus dem Icon ziehe, sollte sie auf die normale Größe mit dem gleichen fließenden Übergang (nicht sofort) gehen. Ich hoffe du verstehst mich. Hier ist mein Code:

li { 
 
    display: inline; 
 
    margin-left: 2.5vh; 
 
\t margin-right: 2.5vh; 
 
} 
 

 
.facebook:hover{ 
 
    cursor: pointer; 
 
    transform: scale(0.8); 
 
    transition: all .2s ease-in-out 0s; 
 
    -webkit-transform: all .2s ease-in-out 0s; 
 
} 
 

 
.instagram:hover{ 
 
    cursor: pointer; 
 
    transform: scale(0.8); 
 
    transition: all .2s ease-in-out 0s; 
 
    -webkit-transform: all .2s ease-in-out 0s; 
 
} 
 

 
.dribble:hover{ 
 
    cursor: pointer; 
 
    transform: scale(0.8); 
 
    transition: all .2s ease-in-out 0s; 
 
    -webkit-transform: all .2s ease-in-out 0s; 
 
} 
 

 
.facebook, .instagram, .dribble { 
 
    transform: scale(0.65); 
 
    -webkit-transform: scale(0.65); 
 
}

<a target="_blank" href="#"><li><img src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" class="facebook"></li></a> 
 
\t \t \t <a target="_blank" href="#"><li><img src="https://awesomeshop.target.com/img/instagram_logo.png" class="instagram"></li> 
 
\t \t \t <a target="_blank" href="#"><li><img src="https://cdn.dribbble.com/assets/favicon-63b2904a073c89b52b19aa08cebc16a154bcf83fee8ecc6439968b1e6db569c7.ico" class="dribble"></li>

Answer 1

Sie haben den Übergang Eigentum auf Ihren Symbole zu setzen, so dass sie nicht nur auf schweben.

li { 
 
    display: inline; 
 
    margin-left: 2.5vh; 
 
\t margin-right: 2.5vh; 
 
} 
 

 
.facebook:hover{ 
 
    cursor: pointer; 
 
    transform: scale(0.8); 
 
    -webkit-transform: all .2s ease-in-out 0s; 
 
} 
 

 
.instagram:hover{ 
 
    cursor: pointer; 
 
    transform: scale(0.8); 
 
    -webkit-transform: all .2s ease-in-out 0s; 
 
} 
 

 
.dribble:hover{ 
 
    cursor: pointer; 
 
    transform: scale(0.8); 
 
    -webkit-transform: all .2s ease-in-out 0s; 
 
} 
 

 
.facebook, .instagram, .dribble { 
 
    transform: scale(0.65); 
 
    -webkit-transform: scale(0.65); 
 
    transition: all .2s ease-in-out 0s; 
 
}

<a target="_blank" href="#"><li><img src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" class="facebook"></li></a> 
 
\t \t \t <a target="_blank" href="#"><li><img src="https://awesomeshop.target.com/img/instagram_logo.png" class="instagram"></li> 
 
\t \t \t <a target="_blank" href="#"><li><img src="https://cdn.dribbble.com/assets/favicon-63b2904a073c89b52b19aa08cebc16a154bcf83fee8ecc6439968b1e6db569c7.ico" class="dribble"></li>

Answer 2

Sie haben den Übergang Eigenschaft für normales Bild verpasst. Bitte befolgen Sie den W3-Standard für die Verwendung von Elementen. <a> Tag sollte innerhalb <li> Tag.

li { 
 
    display: inline; 
 
    margin-left: 2.5vh; 
 
\t margin-right: 2.5vh; 
 
} 
 
.facebook:hover,.instagram:hover,.dribble:hover{ 
 
    cursor: pointer; 
 
    transform: scale(0.8); 
 
    transition: all .2s ease-in-out 0s; 
 
    -webkit-transform: all .2s ease-in-out 0s; 
 
} 
 

 
.facebook, .instagram, .dribble { 
 
    transform: scale(0.65); 
 
    -webkit-transform: scale(0.65); 
 
    transition: all .2s ease-in-out 0s; 
 
    -webkit-transform: all .2s ease-in-out 0s; 
 
}

<li> 
 
    <a target="_blank" href="#"> 
 
    <img src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" class="facebook"> 
 
    </a> 
 
</li> 
 
<li> 
 
    <a target="_blank" href="#"> 
 
    <img src="https://awesomeshop.target.com/img/instagram_logo.png" class="instagram"> 
 
    </a> 
 
</li> 
 
<li> 
 
    <a target="_blank" href="#"> 
 
     <img src="https://cdn.dribbble.com/assets/favicon-63b2904a073c89b52b19aa08cebc16a154bcf83fee8ecc6439968b1e6db569c7.ico" class="dribble"> 
 
    </a> 
 
</li>

Answer 3

Sie haben den Übergang Eigenschaft vermisste für:

.facebook, .instagram, .dribble { 
    transform: scale(0.65); 
    -webkit-transform: scale(0.65); 
    transition: all .2s ease-in-out; 
}