自動スクロール画像（背の高い画像）

Question

画像はゆっくりと上にスクロールして停止します。

私はすでにstackoverflow.com Auto scroll image taller than container on hover

にこれに対する答えを見つけましたしかし、私に必要なのはJavascriptをせずにその答えです。上記のリンクにはjavascript以外の答えがありますが、私の長い画像のためにそれを修正する方法は知られていません。

http://www.creativespad.com/free-divi-layouts/wp-content/uploads/2016/06/mighty.jpg

を（下の画像を参照してください）私はディビテーマを使用していますJavaScriptの原因をたくないと私はどこJavaScriptを置くには考えています。

私は初心者です。あなたのために多くのsooを助けてください

Answer 1

私はあなたの質問に答えることができます。しかし、最初にあなたは画像の高さを知るためにJavaScriptが必要です。 「どのくらいのピクセルをスクロールしますか？」という質問に答えるにはしかし、画像の高さを知っていると仮定するか、同じサイズの画像を使用します。この場合、溶液のキーが上絶対位置、0上部画素と転移性でオーバーフロー子要素「IMG」に隠さ相対位置とと親要素「DIV」を使用することです。次にホバー効果を子供にあなたのケースでは最高値 "画像の高さ - 親の高さ"と画像を追加します。

.img-wrapper 
 
{ 
 
    overflow: hidden; 
 
    position: relative; 
 
    float: left; 
 
    height: 300px; 
 
    width: 400px; 
 
    border:5px solid #BBB; 
 
    border-radius: 5px 5px 5px 5px; 
 
} 
 

 
.extrem-height-image 
 
{ 
 
    position: absolute; 
 
    top: 0; 
 
    width: 400px; 
 
    height: auto; 
 
    transition: top 5s ease-out 0s; 
 
} 
 

 
.extrem-height-image:hover 
 
{ 
 
    top: -300px; 
 
}

<div class="img-wrapper"> 
 
    <img class="extrem-height-image" src="http://placehold.it/400x600"/> 
 
</div>

幸運