ブログなどのアクセントに活用できる画像に白い半透明の表示をする方法

ブログ

2015.01.112017.03.28

photo credit: arripay via photopin cc

今回はブログなどのアクセントに使える、「クリックできる画像に白い半透明のマウスオーバー」を表示する方法をご紹介いたします。

CSS
HTML
サンプル
使い方
まとめ

CSS

下記のCSSを使用します。

1行目の「a:hover img」で、クリックできる(a要素)の画像(img)にマウスオーバーした場合、画像に白い半透明の表示がされるようにしています。

「0.7」、「70」という値を増加、減少させることで、半透明の度合いを変化させることができます。

a:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
}

HTML

HTML側の状態としては以下のようになります。

aタグの中にimgタグがネストされていることがわかります。

<a href="http://www.pc-weblog.com/">
    <img src="hoge.png" alt="hoge画像" width="100" height="100" />
</a>

サンプル

通常の画像

マウスオーバーされた画像

「マウスオーバーされた画像」を見ると、画像が白く半透明になっていることがわかります。

使い方

下記のソースを自分のブログやWebサイトの「CSS」ファイルに貼り付けます。

a:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
}

このソースは当サイトにも使用しています。当サイトはWordPressの野良テーマである「Simplicity」を使用していますので、子テーマである「public_html/wp-content/themes/simplicity-child/style.css」の「style.css」にソースを貼り付けて使用しています。

まとめ

クリックできる画像はマウスオーバーすると白く半透明の表示をする。
CSSソースをコピーする。
自分のブログやWebサイトのCSSファイルにソースを貼り付ける。

クリックできる画像に変化があれば、「お、なんか変わったぞ」といったように画像がクリックできことが訪問者によりわかりやすくなり、ユーザビリティが高まります。

、みなさまのブログやWebサイトのちょっとしたアクセントのお役に立てれば幸いです。