css - expand width in other direction

Question

I've got some icons that expands when I hover them:

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

When I hover an icon it's width is changed, so because of the -webkit-transition is will expand the icon. The way it expands is from left to right which is good for .icon1 and .icon2, but it should be the other way around (right to left) with .icon3 and .icon4.

Answer 1

Use position:absolute and set right:0 and 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