每边溢出

Question

我想放大悬停时的图片。
所以，它的工作到目前为止，但最终的结果不是我想要的。
当图片放大时，它停在包含div的左侧并放大到右侧。

我已经找到了direction属性，但是我只能切换旁边的行为。像direction: all可以propably工作，但它不存在。

我想到：

我能得到什么：

见JSFiddle

我推荐纯CSS没有任何JavaScript和jQuery代码。

Answer 1

这里是做这件事的一种方法：

#container { 
    margin: 0 auto; 
    width: 800px; 
    height: 400px; 
    /*overflow: hidden;*/ 
    position: relative; 
    border: 1px solid red; 
} 
#container img { 
    position: absolute; 
    margin: auto; 
    top: 0px; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
    /*transition: all 0.5s ease;*/ 
} 
#container img:hover { 
    left: -5%; 
    width: 110%; 
    height: 110%; 
} 

添加left: -5%到你的CSS规则img:hover。

见演示在：http://jsfiddle.net/audetwebdesign/Em7yu/