WordPressテーマTCDのカスタマイズを研究するサイト

ボタン画像にマウスオーバー効果を追加する

Q.ボタン画像にマウスオーバーのアニメーションをつけたい

ボタン画像を設置しましたが、ボタン画像にリンクがあるのかどうか分かりにくい状況です。ボタン画像にマウスオーバーすると画像の色が変化するようなアニメーションをつける方法を教えてください。

A.下記のcssファイルに以下のように追記します

編集するファイル:style_pc.css
追記内容:

a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
}
 
a img {
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}

ファイルを編集することにより他部分に影響が出ることがあります。
テーマファイルを編集する際には必ずバックアップをご用意の上、実施して下さい。

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。