jquery - このようなホバー効果を実現する方法

Question

スタックオーバーフローでこの効果について検索しようとしましたが、開発者がこの種のホバー効果と呼んでいるものも、それを達成するためのアイデアがありません。

CSS を使用してこれを達成することは可能ですか?

ありがとう。

Answer 1

あなたはこのようなことをしたいと思うでしょう

<style type="text/css">
 .thumb {position:relative;width:200px;height:20px;}
.thumb:hover .overlay {opacity:0.5;}
.overlay {position:absolute;top:0;left:0;width:200px;height:20px;background:#fff;opacity:0;}
</style>

<div class="thumb">
  <div class="overlay"></div>
  <img src="image.gif" />
</div>