Question

当我将鼠标悬停在图像上时，它会放大，但缺少一半的信息。如何获得它以便放大的图像保留在屏幕上但跟在照片后面？所以如果它有空间就集中在一起，但是如果它没有空间，那么它会被抵消吗？

<style type="text/css">
.zoom_img img{
    height:40px;
    width:50px;
    -moz-transition:-moz-transform 2.0s ease-in; 
    -webkit-transition:-webkit-transform 2.0s ease-in; 
    -o-transition:-o-transform 2.0s ease-in;
    transition:transform 2.0s ease-in;
}

.zoom_img img:hover{
    -moz-transform:scale(2); 
    -webkit-transform:scale(2);
    -o-transform:scale(2);
    transform:scale(2);
}
</style>

Answer 1

您可以使用css伪类:first-child定位列表中的第一项，然后您可以使用transform-origin属性更改scale将发生的位置。

你需要意识到屏幕被缩放以使图像换行到新线条（有效地将列表中没有的项目移动到屏幕的左侧）

<强> CSS

.zoom_img img{
    height:40px;
    width:50px;
    -moz-transition:-moz-transform 2.0s ease-in; 
    -webkit-transition:-webkit-transform 2.0s ease-in; 
    -o-transition:-o-transform 2.0s ease-in;
    transition:transform 2.0s ease-in;
}

.zoom_img img:hover{
    -moz-transform:scale(2); 
    -webkit-transform:scale(2);
    -o-transform:scale(2);
    transform:scale(2);
}

.zoom_img img:first-child{
    -moz-transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

<强> JS Fiddle

修改

您似乎需要更好地控制每个img扩展方向。这里有一些CSS，允许您向图像添加一个类，使其向下和向右或向下和向左展开。（您可以根据自己的[transform-origin][2]百分比添加任意数量的课程，但这样可以让您有一个开始的想法

<强> CSS

.zoom_img img{ height:40px; width:50px; -moz-transition:-moz-transform 2.0s ease-in; -webkit-transition:-webkit-transform 2.0s ease-in; -o-transition:-o-transform 2.0s ease-in; transition:transform 2.0s ease-in; } .zoom_img img:hover{ -moz-transform:scale(2); -webkit-transform:scale(2); -o-transform:scale(2); transform:scale(2); } .zoom_img img.goRight{ -moz-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; } .zoom_img img.goLeft{ -moz-transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; }

<强> HTML

<div class="zoom_img"> <img class="goRight" src="http://www.adweek.com/files/imagecache/node-blog/blogs/yahoo-original.jpg" /> <img class="goRight" src="http://www.adweek.com/files/imagecache/node-blog/blogs/yahoo-original.jpg" /> <img class="goRight" src="http://www.adweek.com/files/imagecache/node-blog/blogs/yahoo-original.jpg" /> <img class="goRight" src="http://www.adweek.com/files/imagecache/node-blog/blogs/yahoo-original.jpg" /> <img class="goLeft" src="http://www.adweek.com/files/imagecache/node-blog/blogs/yahoo-original.jpg" /> <img class="goLeft" src="http://www.adweek.com/files/imagecache/node-blog/blogs/yahoo-original.jpg" /> <img class="goLeft" src="http://www.adweek.com/files/imagecache/node-blog/blogs/yahoo-original.jpg" /> <img class="goLeft" src="http://www.adweek.com/files/imagecache/node-blog/blogs/yahoo-original.jpg" /> </div>

<强> UPDATED FIDDLE

悬停时图像放大，使用CSS3过渡进行屏幕边缘检测

1 个答案: