Question

我在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>

Answer 1

试试这个..

 <!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>

Answer 2

您可以在悬停时使用位置：绝对或固定，并根据屏幕管理图像的位置。

Answer 3

这确实是可能的，在您当前的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/

悬停时的图像缩放

3 个答案: