懸停時的圖像縮放

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

來源

2016-05-31 KT B

嘗試使用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>

來源

2016-05-31 07:18:59 Muthu

您可以使用位置：懸停絕對或固定和奶源的p根據屏幕圖像的位置。

來源

2016-05-31 07:28:13

請考慮更詳細的答案，以及一些代碼示例，將爲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/

來源

2016-05-31 07:31:33 Pimmol

懸停時的圖像縮放

回答

相關問題