CSS-在其他方向上扩展宽度 [英] css - expand width in other direction

问题描述

当我将它们悬停在图标上时，它们会展开:

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

当我将鼠标悬停在图标上时，它的宽度已更改，因此-webkit-transition会扩展该图标.它的扩展方式是从左向右扩展，这对.icon1和.icon2很有好处，但应该与.icon3和.icon4相反(从右向左)扩展.

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.

推荐答案

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

这篇关于CSS-在其他方向上扩展宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！