Question

我发现了一个很好的教程，可以让我的图像在悬停时放大（如缩放效果）。我的需求和教程之间的主要区别在于我希望我的所有图像都包含在像容器这样的单个框中。因此，当我实施教程时，我意识到当你悬停时，放大图像的一部分会被切断。效果受限于容器。我希望有一种方法可以将缩放放到需要在页面上的任何位置。（所以你可以看到整个放大的图像）以下是我对教程的实现：http://mulnix.contestari.com/wp/example225/1.php

JSFiddle：http://jsfiddle.net/dsRAH/ Original Code

Answer 1

LIVE DEMO

删除溢出：隐藏和所有其他溢出，
对于您的图片，容器DIV会移除float:left;并添加display:inline-block;

*{
    margin:0;
    padding:0;
}

.wrapper {
    margin: 0px auto;
    background: #130802;
    width: 1024px;
    position: relative;
    color: #F2D5B7;
    z-index: 0;
}

.photos {
    position:relative;
}
.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    height: 100px;
    margin: 5px;
    position: relative;
    display:inline-block;
    width: 300px;
    z-index: 1;
    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;

    -webkit-transform:scale(1.6);
    -moz-transform:scale(1.6);
    -ms-transform:scale(1.6);
    -o-transform:scale(1.6);
    transform:scale(1.6);
}

Answer 2

您可以尝试使用z-index。具有较大z-index的元素始终位于具有较低z-index的元素的前面。如果你的主容器没有溢出：隐藏，你可以试试这个。

这是一个例子，你可以看到它是如何工作的。希望这很有帮助。

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 3

这不完美，但这是一个开始。我将包装器中的overflow:hidden;更改为visible。我还将你的代码放入jsfiddle，这样人们就可以修补它。

http://jsfiddle.net/m8FXH/

Answer 4

我建议给你的div一个以下类：

对于左列的
对于右列的
排在最上一行的行顶端
行底部的行底部

然后为它们分配以下属性

.colleft {
    transform-origin-x: 0%;
}

....

    transform-origin-x: 100%;
    transform-origin-y: 0%;
    transform-origin-y: 100%;

（分别）

这将使缩放进入所需的方向。

evan stoddard modified fiddle

CSS扩大问题悬停效果

4 个答案: