ホバー上の画像スケーリング

私は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

ホバー上の画像スケーリング

答えて

関連する問題