悬停时的图像缩放

问题描述：

我在HTML页面中有很少的图像，并希望这些图像在悬停时缩放。所以我写了下面的代码，效果很好。然而，现在图像缩放到他们的位置，所以有机会它会被剪切，所以我想缩放的图像被放置在屏幕的中心。有人可以帮我弄这个吗？悬停时的图像缩放

验证码：

.parentimage { 
 
    width: 100px; 
 
    height: 100px; 
 
    -webkit-transition: all .3s ease-out; 
 
    -moz-transition: all .3s ease-out; 
 
    -o-transition: all .3s ease-out; 
 
    transition: all .3s ease-out; 
 
} 
 
.parentimage:hover { 
 
    -moz-transform: scale(4); 
 
    -webkit-transform: scale(4); 
 
    -o-transform: scale(4); 
 
    -ms-transform: scale(4); 
 
    transform: scale(4); 
 
}

<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
 
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
 
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
 
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
 
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
 
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
 
<li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li>

尝试使用JS为了得到视口的大小，和做数学题，以将您的元素移动到正确的位置。 – GibboK

为什么不使用CSS？ – Pimmol

答

试试这个..

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 

    .parentimage { 
    width: 100px; 
    height: 100px; 
    -webkit-transition: all .3s ease-out; 
    -moz-transition: all .3s ease-out; 
    -o-transition: all .3s ease-out; 
    transition: all .3s ease-out; 

    } 
    .parentimage:hover { 
    -moz-transform: scale(4); 
    -webkit-transform: scale(4); 
    -o-transform: scale(4); 
    -ms-transform: scale(4); 
    transform: scale(4); 
    display: block; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -194px;  
    margin-left: -190px; 
    } 
    </style> 
    </head> 
    <body> 
    <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
    <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
    <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
    <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
    <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
    <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
    <li style='display:inline;padding: 5px 5px;'><img style=' border: 5px solid white;width:150px;height:130px' class='parentimage' src='https://stanhub.com/tutorials/hover-to-zoom-image-effect/new-york.jpg' ></li> 
    </body> 

    </html>

答

您可以使用位置：悬停绝对或固定和奶源的p根据屏幕图像的位置。

请考虑更详细的答案，以及一些代码示例，将为OP提供更好的帮助。 – Aleksej

答

这确实是可能的，在您当前的CSS中进行一个小的编辑。

.parentimage:hover { 
    -moz-transform: scale(4); 
    -webkit-transform: scale(4); 
    -o-transform: scale(4); 
    -ms-transform: scale(4); 
    transform: scale(4); 

    position: fixed; 
    top: 50%; 
    left: 50%; 

    margin-left: -75px; 
    margin-top: -65px; 
}

注：这可能因为你将无法正常工作。例如，图像位于左上角。用户将其悬停并且图像转换到页面中心。由于它移动，光标离开图像，导致图像过渡回到左上角。然后将光标悬停再次...等等

看到一个例子：

https://jsfiddle.net/494krowe/2/

悬停时的图像缩放

相关推荐