私は各アルバムの積み重ねられた写真でフォトギャラリーを構築しようとしています。私はあなたが同時に3つの画像のビットを参照するように、右20回転するために、1つの画像が20を左に回転させたい、アルバムをホバーするとき。CSS:3枚の積み重なった画像にカーソルを合わせる
私は、ホバリング信号がスタックの一番上の画像に張り付いているというのが問題だと思います。私は以下で試したことを投稿します。何か案は?出来ますか?ただ、これを変更
<!DOCTYPE html>
<head>
<title>Just-CSS: Rotate stacked images on hover</title>
<style>
body {
background-color: black;
color: white;
padding: 20px;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
position: absolute;
}
img { -webkit-transition: all 0.2s; }
img:hover.green {-webkit-transform: rotate(-20deg);}
img:hover.blue {-webkit-transform: rotate(20deg);}
img { border: 4px solid white; }
img.red { background-color: red; }
img.green { background-color: green; }
img.blue { background-color: blue; }
</style>
</head>
<body>
<ul class="img-stack">
<li><img class="red" width="100" height="100" src=""></li>
<li><img class="green" width="100" height="100" src=""></li>
<li><img class="blue" width="100" height="100" src=""></li>
</ul>
</body>
</html>
は、私はあなたがJavaScriptでそれを行うことができます知っているが、私はちょうどそうしてくださいなしのJavaScript :)