css - mở rộng chiều rộng theo hướng khác

Question

Tôi đã có một số biểu tượng mở ra khi tôi lơ lửng họ:

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

Khi tôi di chuột một biểu tượng đó là chiều rộng được thay đổi, như vậy vì những -webkit-chuyển là ý chí mở rộng biểu tượng. Cách nó mở rộng là từ trái sang phải là tốt cho .icon1 và .icon2, nhưng nó phải là cách khác xung quanh (phải sang trái) với .icon3 và .icon4.

Answer 1

Sử dụng position:absolute và thiết lập right:0 và 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