こんにちは！
画像の上にマウスをのせた時に、半透明になる、って結構見かけますよね？
今日は「ワードプレスでリンク画像の上にマウスをのせた時に、半透明にする方法」について解説していきたいと思います😊
簡単なので、ぜひ挑戦してみてくださいね✨
まずは「ダッシュボード」→「外観」→「カスタマイズ」をクリックします。
「追加CSSを追加する」をクリックします。
以下のコードをコピペするだけです。
————————————————–
/*ロールオーバー*/
a:hover img{
opacity:0.5;
filter:alpha(opacity=70);
-ms-filter: “alpha( opacity=70 )”;
transition: 0.6s;
}
————————————————–
opacity:0.5; の部分は、透明度を表しています。
0~1まで調整可能で、1に近づく程 不透明になります。お好みで調整して下さいね☘️
transition: 0.6s; というのは、画像を白く光らせるまでの速度を表すコードです。
上の場合「クリックして0.6秒で白く光らせる」という意味になります。
もっとゆっくり光らせたい場合は1秒にするなど、こちらもお好みで調整して下さいね☘️
最後に「公開」を押すと完了です❣️
おつかれさまでした😊🌸
サイトが見やすくなってくるのは、嬉しいですね😊✨