悬停时图像向左移动答案

【问题标题】：Image move left on hover悬停时图像向左移动
【发布时间】：2013-02-24 22:23:27
【问题描述】：

我是网页设计的新手，我有一个特定的例子，好吧，我被困在这里：您有 3 张图片组合了徽标，当您将鼠标悬停在中间图片上时，侧面的图片每边都膨胀了 50 像素。我已经实现了使用填充在右侧移动图像的目标，但是当我尝试对左侧执行相同操作时，我的图像开始向左跳并返回到原始位置。

如果有人有更好的建议，我喜欢研究它。

这是我希望实现的example。

我想出了这个代码：

    #logo_levo{
        position: absolute;
        float: right;
        width: 111px;
        height: 111px;
        -moz-transition:all 0.3s linear;

    }
    #logo_levo:hover{
        padding-right: 100px;
    }

html:

<img id="logo_levo" src="data/images/Class_B_obroc1_logo.png"/>

【问题讨论】：

标签： image hover position padding transition

【解决方案1】：

好的，这是您可以处理的事情。小提琴上的 css 规则..检查小提琴

fiddle here

<div id='logo'>
  <div id='a'></div><!--left image-->
  <div id='b'></div><!--middle image-->
  <div id='c'></div><!--right image-->
</div>

【讨论】：