用css悬停移动图像答案

【问题标题】：moving images on hover with css用css悬停移动图像
【发布时间】：2014-01-21 00:45:19
【问题描述】：

是否有可能有这种悬停效果http://apotheke-hh.de/index.php?option=com_content&view=category&layout=blog&id=11&Itemid=2 使用 css，可在所有主流浏览器中使用？

对于阅读此内容的其他人，如果链接已损坏 - 请参阅附加图片。

问候托斯滕！

hover image one

【问题讨论】：

要求代码的问题必须表明对所解决问题的最低理解。包括尝试的解决方案、为什么它们不起作用以及预期的结果。另请参阅：堆栈溢出问题清单。
嗨 Paulie - 我了解 CSS 但不了解 JS。这里的结果是一个非常有用的答案，它使用更少的代码并且是一个现代的解决方案，可以帮助其他人。

标签： css image hover move

【解决方案1】：

我想所有主流浏览器都可以，但这当然取决于版本，这里是一个例子：

HTML

<div class="all">
    <div class="col one"></div>
    <div class="col two"></div>
    <div class="col three"></div>
</div>

CSS

.col {
   float:left;
    width: 33.3333%;
    height: 150px;
    transition:width 300ms ;
}

.all:hover .col{
    width:25%;
}
.all:hover .col:hover {
    width: 50%;
}

在 JSFiddle 上直播：http://jsfiddle.net/pavloschris/mrXPu/

唯一的“奇怪”规则是transition，它有很好的支持，如Can I Use所示

【讨论】：

非常感谢 Pavlos - 这正是我正在寻找的 :)

【解决方案2】：

你很可能需要 JS 来实现这个效果！并非所有主流浏览器都可以使用纯 CSS 解决方案。

【讨论】：