HOME > > > hoverすると白黒画像が透過して背景画像が現れるボタン

hoverすると白黒画像が透過して背景画像が現れるボタン

透過ボタン

画像が透過するボタン

ボタンの作り方は色々あります。
jqueryで画像を切り替えたり、aタグに背景を入れて切り替えたり本当に様々です。
その中で1つ、ロールオーバーすると透過するボタンを設置してみようと思います。

サンプルはこちら

htmlの記述

ボタンになる画像をdivで囲います。

<div class="box"/>
<img src="btn_off.jpg" width="100" height="100"/>
</div/>

CSSの記述

CSSの記述

囲ったdivにオーバーした時に表示する画像を背景に設置します。
「img:hover」にopacityを入れる事でロールオーバーした時にメイン画像を透明にします。

.box{
 background: url(オーバーした時に表示する画像のパス) no-repeat;
}

img:hover{
 opacity: 0;
}

設定は以上です

aタグでリンクをつける場合は、aに画像を入れても出来ると思います。
色々なパターンも検証していきます。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.03.16