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

large_5227093861

photo credit: arripay via photopin cc

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

CSS

下記のCSSを使用します。

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

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

HTML

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

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

サンプル

通常の画像

マウスオーバーされていない画像

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

マウスオーバーされている画像

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

使い方

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

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

まとめ

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

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

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

スポンサーリンク

シェアする

フォローする

ブログなどのアクセントに活用できる画像に白い半透明の表示をする方法
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!