人気ブログランキング | 話題のタグを見る
ブログトップブログトップ
パソコン教室くりっくパソコン教室
魚沼情報サービス魚沼情報サービス
パソコン教室くりっくへのお問い合わせお問い合わせ
全国どこからでも Zoom オンラインレッスンを受け付けています。

画像に動きがあるロールオーバー効果(マウスオーバー効果)をつける方法

ブログランキング参加中。ポチッとお願いします。 にほんブログ村 PC家電ブログ パソコン教室・サポートへ
ハイクオリティなサイトを驚きの低価格で実現 ~ WordPress サイト開設スターターパック
※この記事はブログカスタマイズの中級以上の方向け(HTML/CSSの基本を理解している方向け)です。

ブログやホームページで、リンクが設定されている画像にマウスを合わせると、画像が明るくなったりして注意を引くことがあります。その結果、画像をクリックしてもらいやすくなります。

この動きを ロールオーバー効果 とか マウスオーバー効果 などと呼んでいます。(以下、ロールオーバー効果)

CSS3 で追加された transform というプロパティを使うと、画像のロールオーバー効果に動きを持たせることがかんたんにできます。

例えば、以下のスタイルを使うと、画像が1.1倍に拡大されて時計回りに2度回転するロールオーバー効果になります。
a img:hover {
transform: scale(1.1) rotate(2deg);
}


これだけだと画像が瞬時に切り替わってしまって趣がないので、transition プロパティを使ってじわ~っと切り替えるといいかんじになります。
a img {
transition: transform 0.6s;
}

a img:hover {
transform: scale(1.1) rotate(2deg);
}
上の例では、0.6秒かけて画像を切り替えています。

このブログでは、以前に こちらの記事 で紹介した opacity プロパティも使って、さらに画像を明るくする効果も持たせてみました。

スタイルは以下のようになっています。
a img {
transition: opacity 0.6s, transform 0.6s;
}

a img:hover {
transform: scale(1.1) rotate(2deg);
opacity: 0.5;
}

画像に動きがあるロールオーバー効果(マウスオーバー効果)をつける方法 _d0015124_18313482.jpg


スタイルに数行を付け加えるだけで、こういった「おっ!!」と感じさせる動きを実現できるんです。

パソコン教室くりっくでは、ホームページのスタイルを基本からじっくりと勉強したい方向けのマンツーマン講習を行っています。興味がある方はお気軽にお問い合わせください。

【問い合わせ電話番号】 025-779-2843
Zoom オンラインパソコンレッスン 全国どこでも自宅がパソコン教室に
by pc_klik | 2016-11-28 19:00 | ブログ TIPS

全国どこからでも Zoom オンラインレッスンを受け付けています。経験・実績が豊富な講師が100%専任で対応する完全個別マンツーマンのパソコン教室です。知りたいこと、わからないことなど、どんどん質問してください。その場でお悩み・お困りごとの解決をお手伝いします。

   


by パソコン教室くりっく
MENU