これずっと画像を光らせていると思ってたんですが、実は透過設定しているんですねw
CSSに以下を追記するだけですが、ワードプレスでテンプレートを使用している場合
すでに「opacity」（透過）の設定がされている場合も多いのでまずは「opacity」で検索しましょう。
検索はctrl＋fでできます。
そこで検索にひっかかったらその部分を修正またはその下に追記しましょう。
なければcssの一番したで構いません。
サイト内全体に反映
a img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
※CSSに「a img」があったら、そこに以下を追記します。
a:hover img {
opacity: 0.7; /* 透過レベル */
filter: alpha(opacity=80);
}
※こちらはマウスオーバー時の指定です。
透過レベルの数値は「１」で元画像の濃さです。
数値が低くなればなるほど薄くなって光っているように見えます。
あくまで透過ですので背景を指定している時はそちらが映ってしまわないように注意しましょう。
画像ごとに指定もしくはサイト内全体に反映させることが出来ます。
以下をCSSに記載すればそれぞれの画像ごとに設定することも可能です。
.fade {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.fade:hover {
opacity: 0.7; /* 透過レベル */
filter: alpha(opacity=60);
}
HTML記述時に、「class=”fade”」を記入します。
1
リンク画像を光らせるのは良く使うので使いまわせて便利です。