CSS のみを使用して jquery を使用せずに、img の不透明度を変更し、ホバー時のズーム用に 50x50 のサムネイルを追加したいと思います。これは私がこれまで行ってきたことです。
HTML コード:
<div class="span4">
<a class="zoom-icon" href="#">
<img class="blackout image-1" alt="Elite Sports" src="http://www.domain.com/images/es.jpg" width="300" height="300">
</a>
</div>
CSS コード:
.span4 { margin: 35px 50px; border: 5px solid #000; }
.span4:hover { border: 5px solid #ccc; }
.span4 a:hover { background: #000; }
.blackout:hover { opacity: .0; }
ホバー時に黒い背景が機能していますが、黒い背景の「ブラックアウト」の上にサムネイルを表示する方法がわかりません。役立つヒントをいただければ幸いです。
フィドルで更新: