css - 使用CSS在悬停时 move 图像

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 中所示。