使用css悬停移动图像

有可能有这种悬停效应吗 使用css，可以在所有主流浏览器中工作

对于阅读本文的其他人，如果链接断开，请参阅附件中的图片

问候 托尔斯滕！

---

您很可能需要JS来实现此效果！不可能在所有主要浏览器中都使用CSS解决方案。

我想您可以在所有主要浏览器中使用CSS解决方案，但这取决于版本。当然，下面是一个示例：

HTML

以及JSFIDLE上的直播：

---

唯一的“奇怪”规则是

转换

，它有很好的支持，如

询问代码的问题必须证明对正在解决的问题的最低理解。包括尝试过的解决方案、它们不起作用的原因以及预期结果。另请参阅：堆栈溢出问题清单。嗨，Paulie-我理解CSS，但不理解JS。这里的结果是一个非常有用的答案，使用更少的代码，是一个当代的解决方案，可以帮助其他人。非常感谢Pavlos-这正是我想要的：）

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

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

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