ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマGorgeousのボタン画像にマウスオーバー効果を設定する

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

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;
}

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

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事