用css悬停移动图像

Question

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

对于阅读此内容并且链接断开的其他人 - 请参阅附件图片。

此致 托！

hover image one

Answer 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

所示

Answer 2

最有可能你需要JS才能达到这个效果！所有主流浏览器都无法使用仅CSS解决方案。