html - css - 在其他方向扩展宽度

Question

我有一些图标，当我悬停它们时它们会展开:

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

当我将鼠标悬停在图标上时，它的宽度会发生变化，因此 -webkit-transition 会扩展图标。它展开的方式是从左到右，这对 .icon1 和 .icon2 来说是好的，但对于 .icon3 和 .icon4 应该是相反的方式(从右到左)。

Answer 1

使用position:absolute 并设置right:0 和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