【 Windows 10 アップグレードサービス申込受付中 】2020年1月14日にマイクロソフトによる Windows 7 のサポートが終了します。

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

ホームページのこと

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

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

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

例えば、以下のスタイルを使うと、画像が1.1倍に拡大するロールオーバー効果になります。

a img:hover {
transform: scale(1.1);
}

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

a img {
transition: transform 0.6s;
}

a img:hover {
transform: scale(1.1);
}

上の例では、0.6秒かけて画像を切り替えています。

このブログのトップページに表示されている最新記事の画像にこのロールオーバー効果を設定しました。以前に下記の記事で紹介した opacity プロパティも使って、さらに画像を明るくする効果も持たせてあります。

画像にロールオーバー効果(マウスオーバー効果)をつけるかんたんな方法
ロールオーバー効果とは? ブログやホームページでリンクが設定されている画像にマウスを合わせると、画像が明るくなったり別の画像に切り替わったりすることがあります。 このことを ロールオーバー効果 とか マウスオーバー効果 などと呼んで...

スタイルは以下のようになっています。

a img {
transition: opacity 0.6s, transform 0.6s;
}

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

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

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

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

ホームページでお困りのこと、お気軽にご相談ください

効果が出るホームページを格安料金で制作いたします。スマホ対応、SNS連携、SEO対策、常時SSL化もおまかせください。ホームページのちょっとしたデザイン変更や不具合の修正、更新作業のお手伝いもしています。

お困りのこと、なんでもお気軽にご相談ください。

ホームページのこと
魚沼情報サービスをフォローする
魚沼情報サービスのブログ