css - poszerzyć szerokość w innym kierunku

Question

Mam kilka ikon, które rozszerza się, kiedy je kursorem:

.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; 
    } 

Kiedy najechaniu ikony To szerokość zmienia się, więc ze względu na -webkit przejściowy jest wola rozwiń ikonę. Sposób, w jaki się rozwija, jest od lewej do prawej, co jest dobre dla .icon1 i .icon2, ale powinno być odwrotnie (od prawej do lewej) z .icon3 i .icon4.

Answer 1

Zastosowanie position:absolute i ustawić right:0 i 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