KuzLog

KuzLog
2017/02/25 2019/07/20 Web制作

最近よく見る、マウスオーバー時にヌルっと拡大する画像の作り方+α

最近トップページの記事一覧をグリッドレイアウトで組んでいるブログが多いですよね(うちのブログもだけど)

そして、ほとんどのブログが各コンテンツにというカードっぽいデザイン(上に画像・下にタイトル)を採用しています。まぁ普通にお洒落です…が、画像部分にマウスオーバーした時、何もエフェクトが掛からないのってちょっと味気ないですよね。

そこで今回は、マウスオーバーした際に画像をヌルっと拡大させる方法を紹介します。ヌルリ。

拡大するだけ

See the Pen Mouse Hover Effect by Kuzlog (@Kuzlog) on CodePen.

画像を拡大するだけなら、HTMLもCSSも少ないコードで実装出来ます。

HTMLはこれだけ。画像をdivで囲って、適当なクラスを付けといてください。

んで、CSSの部分なんですが、CodePenだと少し見にくい上にSCSSで書いちゃってるので、コンパイル済みのCSSを必要な部分だけ載せておきます。

画像を内包する.imgWrapoverflow:hidden;を指定することで、画像拡大時のはみ出し部分を隠しています。簡単!

若干暗く

See the Pen Mouse Hover Effect by Kuzlog (@Kuzlog) on CodePen.

先程のコードに2行だけ追加するだけ。HTML部分は手を加えなくてOKです。

opacityで画像を透過して、背景色の黒をうっすらと表示させています。簡単!

四隅を暗く

See the Pen Mouse Hover Effect @ RadialGradient by Kuzlog (@Kuzlog) on CodePen.

さて、ここから急に記述がややこしくなります。

2番目に紹介したのコードの#000部分を、円形グラデーションを指定するradial-gradientに変えるだけでいけそうな気もしますが、それだと中央部分が灰色っぽい不自然な色になってしまいます。画像を透過させているので、裏の色が出てきちゃうんですよね…

なので、疑似要素を駆使してなんとかしましょう。

まずはHTML部分ですが、画像を包むdivを1個増やします。

続いてCSSです。

:beforeで生成した疑似要素をopacity:0(透明な状態)で前面に配置し、マウスオーバー時にopacity:1で可視化しています。

この方法なら画像自体の透過度は変わらないため、中央も四隅もキレイに暗くなります。

テキストを重ねる

See the Pen Mouse Hover Effect @ ReadMore by Kuzlog (@Kuzlog) on CodePen.

最後はテキストを重ねる方法です。ブログなら「Read More」とか表示したいからね。

HTML部分は3番目のコードと共通で、CSSもいくつか追加するだけでOKです。

追加するコードがやたらと多いですが、ほとんど文字の装飾に関するものなので難しくはないはず。ここらへんの設定はご自由にどうぞ。

最後に

今回紹介したコードはベンダープレフィックスを一切付けていないので、実用するときは注意してください。

あと、動作確認でChromeとFirefoxはしっかり動いてくれたんですが、IEはscale(n)transition-duration:n;を組み合わせて使うと動きがカクつく事が判明しました…こればっかりはどうしようもないので、IEが死滅することを祈るしかありません。

…それではこれで終わりですが、もし「もっと短いコードで同じようなの作れるよ~」って人がいたら、Twitterとかで教えてくれたら喜びます。おやすみなさい。