すでに挿入してある画像リンクすべてにマウスを乗せると半透明(光る)にさせることができるCSS。またその半透明(光る)にさせるまでの時間を調整することができるCSS。

css_hanntoumei

HaLPosTでは画像リンクを分かりやすくするために、画像にマウスを乗せると半透明(光る)になるようにしています。今回はそのコードの紹介です。


画像にマウスを乗せると半透明(光る)にさせることができるCSS

まずは下記の画像にマウスを乗せてください。
sumartfonnfirutaどうですか!?半透明になったと思います。


このように半透明にしたい場合は
}
a:hover img{
opacity:0.3;
filter:alpha(opacity=30);
}
とします。

数字を変えると透明度を調整することができます。1.0(100%)が最大の不透明です。自分は0.3(30%)にしています。

半透明(光る)にさせるまでの時間を調整するCSS

上記のCSSだけだとすぐに半透明になりますが、下記のCSSを加えると半透明にさせる時間を調整できます。
-webkit-transition:all 0.25s linear;
-moz-transition:all 0.25s linear;
transition:all 0.25s linear;
数字を変えると半透明になるまでの時間を調整できます。このブログでは0.25sにしています。


この2つを合わせると
}
a:hover img{
opacity:0.3;
filter:alpha(opacity=30);
-ms-filter: “alpha( opacity=30 )”;
-webkit-transition:all 0.25s linear;
-moz-transition:all 0.25s linear;
transition:all 0.25s linear;
}
となります。


この半透明(光る)にさせるまでの時間を調整するCSSは画像でなくてもCSSで作ったボタンでも調整することができます。

HaLPosTのサイトでは、サイドバーの「Search」ボタンやトップページにある「続きを読む」ボタンになります。



すでにある画像に簡単なCSSを追加するだけでだいぶブログの感じが変わると思いますのでおすすめです!!



photo credit: laRuth via photopin cc

シェアする

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です