読者です 読者をやめる 読者になる 読者になる

キロクのブログ

変わりゆく風景やものを単なる私的思い入れで記録中。意外とのんびりしてられない。

[HTML・CSS]CSSでエフェクト:hoverで文字が拡大する

何度引越してもずっと白が基調の我がブログ。
地味で無機質になりがちなので、マウスオーバーしたとき、その部分がほわっと拡大するエフェクトを付けてみました。

【例】
ここからトップページに飛びます。


jQueryなどのJavaScriptを使わず、CSSのみで簡単に実装できます。

a{
    display: inline-block;
    color: #999;   
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
}


時間の変化を操作する「transform」というプロパティを使用するのですが、今回のポイントは、

  • a タグはインライン要素なので、display: inline-block; にして、 transform プロパティが使えるようにする。
  • リンクのない他の文章には影響させたくないのでscale を使って指定。

ブログ全体に適用してしまうと鬱陶しくなったり、サイドバーのレイアウトが崩れる可能性があります。記事の部分のみに適用するには「a」「a:hover」のところを適当なものに変えてください。当ブログでは「entry-content a」「entry-content a:hover」と書いています。

文字だけでなく画像にも使えます。
今回は「拡大」ですが、他にも反転させるとか、回転するとか、ほわっと変化するとか、いろんな効果が作れます。
そのうちまた書いていきますね。