hoverした時に画像を30%ブラックアウトしたいです。

Question

###hoverした時に画像を30%ブラックアウトしたいです。
画像をブラックアウトにする方法がわからないです。それとsport_pick_contentsをhoverした時に画像はブラックアウト、aタグの部分は background: #ffffd1;と別々の指定にしたいのですが、それは可能でしょうか？教えて頂ければ幸いです。

###該当のソースコード

<div class="sport_pick_top">
  <div class="sport_pick_contents">
   <img src="images/sport_pick/baseball.jpg" alt="野球">
   <a href="#" class="sport_pick_title">野球</a>
 </div>
</div>

###該当のソースコード

.sport_pick_top {
  margin: auto;
}


.sport_pick_contents {
  float: left;
  height:220px;
  width: 118px;
  margin-top: 10px;
  border: solid 1px #e0efff;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.sport_pick_contents img {
  height: 120px;
  width: 120px;
}

.sport_pick_contents:hover{
 background: #ffffd1;
 opacity: 0.8;
}

.sport_pick_title {
  display: block;
  color: #444;
  padding: 10px 0 40px 10px;
  font-size: 12px;
}

Answer 1

画像の明るさを変える方法としてfilter: brightnessというのがあります。
簡単ですがIEは対応してないし（対応させる方法はある）
ベンダープレフィックスも必要ですので一長一短です。

もう一つはposition: absoluteなどで画像の上に要素を置き、
その要素を画像と同じ大きさにしてz-indexで画像の上に指定、
background-color: rgba(0, 0, 0, 0.3)で半透明の黒を被せる方法です。
（rgbaの中身は適当なので調整してください。）

こっちはIE8以降対応ですが、ちょっと面倒くさいですよね。
お好みでご利用ください。

Comments

[退会済みユーザー]

早々のご回答ありがとうございます。
とても勉強になりました！
参考にさせて頂きます。