CSS - erweitern Breite in andere Richtung

Question

ich einige Symbole haben, das sich ausdehnt, wenn ich sie schweben:

.icon 
    { 
     width: 128px; 
     height: 128px; 
     background: url(icons.png) no-repeat; 
     background-position: left top; 
     -webkit-transition: width .2s; 
    } 
    .icon.icon1:hover 
    { 
     width: 270px; 
     backgorund-position-x: -128px; 
    } 

Wenn ich ein Symbol schweben es Breite geändert wird, so wegen der -webkit-Übergang ist der Wille Erweitern Sie das Symbol. Die Art und Weise wie es expandiert ist von links nach rechts, was gut für .icon1 und .icon2 ist, aber es sollte andersherum sein (von rechts nach links) mit .icon3 und .icon4.

Answer 1

Verwenden position:absolute und stellen right:0 und top:0

.icon{ 
    width: 128px; 
    height: 128px; 
    background: url(icons.png) no-repeat red; 
    background-position: left top; 
    -webkit-transition: width .2s; 
    position:absolute; 
    top:0; right:0; 
} 
.icon:hover{ 
    width:250px 
} 

DEMO