html css複数の画像をスーパーインポーズする

cssとhtmlを使用して複数の画像を1行にスーパーインポーズする方法は？
例：私のカーソルがimage1の上にある場合、私は私がこれまで行ってきたものをここではimage1のhtml css複数の画像をスーパーインポーズする

を見ることができるように、私が欲しい右側のすべての画像が右にプッシュすること：

HTML

<body> 
      <div class="deck"> 
       <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage"> 
       <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage"> 
       <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage"> 
       <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage"> 

      </div> 
</body>

CSS

.deck {overflow:hidden} 
.deck img {position:relative; float:left; width:185px; height:278px} 
.deck img + img {margin-left: -160px;} 
.deck img:hover {z-index:9999; border:1px solid red; background: pink}

https://jsfiddle.net/53ryuapx/

出典

2017-10-29 Benf Maappy

あなたはJavaScriptのソリューションを開いていますか？ – agrm

~セレクタを使用して、ホバーした画像に続くすべての画像を選択できます。画像が比較的に配置されているように、あなたはleft値でこれを組み合わせることができます。

.deck img:hover ~ img { 
    left: 160px; 
}

は、私もあなたは比較的新しいclip-pathプロパティと組み合わせることをお勧めかもしれませんか？残念ながらbrowser support is not great。

.deck img:hover ~ img { 
    left: 160px; 
    clip-path: inset(0 160px 0 0) 
}

編集：あなたが好む結果に応じて、これをアニメーション化するには、いくつかの方法があります。これは、あなたが望む結果に達するためにいくつかの練習を必要とするかもしれませんが、これはあなたを始めるはずです。ここでは、slideinというキーフレームアニメーションを宣言しています。画像がホバリングされると、右の画像はanimation: slidein .2sを使用してアニメ化されます。 this JSFiddleの効果を確認してください：

@keyframes slidein { 
    0% { 
    left: 0; 
    clip-path: inset(0 0 0 0); 
    } 
    100% { 
    left: 160px; 
    clip-path: inset(0 160px 0 0); 
    } 
} 
.deck img:hover ~ img { 
    left: 160px; 
    clip-path: inset(0 160px 0 0); 
    animation: slidein .2s; 
}

出典

2017-10-29 12:32:28 agrm

ありがとうございます!!! –

しかし、画像が右に押されたときのアニメーションの追加方法 –

@BenfMaappy CSSキーフレームアニメーションで自分の答えを更新しました。私もあなたのフィドルと一緒に遊んで、[いくつかの小さな微調整をしました]（https://jsfiddle.net/53ryuapx/4/）。ホープが助けてくれると期待しています：o） – agrm

html css複数の画像をスーパーインポーズする

答えて

関連する問題