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

css - expand width in other direction

提问by Gregor Menih

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.

当我悬停一个图标时，它的宽度会发生变化，因此由于 -webkit-transition 将扩展图标。它扩展的方式是从左到右，这对 .icon1 和 .icon2 有利，但对于 .icon3 和 .icon4 应该是相反的（从右到左）。

回答by Sowmya

Use position:absoluteand set right:0and top:0

使用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

演示