ホームページに動きをつける：cssだけで画像にマウスオーバーで動きをつけたい

記事公開日：2017.07.21 （最終更新日：2017.11.08）

ホームページ制作でお客様からのご依頼で最近増えているのが、「動きをつけてほしい！」というもの。
ホームページの見せ方もトレンドがあり、今はやっぱり動きがあるホームページが多いように思います。

例えば、トップページのメイン画像が横から縦からふんわりと等、スクロールして次々に写真がかわったり、画像にさわると写真に動きが生まれたり、など。。。

javascriptでいろいろなことができるのですが、あまりjavascriptファイルを増やしたくない気持ちもあったりします。（私の場合です）

javascript無しで、cssだけでできる動きの効果

cssへの書き込みだけで、画像をマウスオーバーしたら画像が拡大して、文字が現れるcssです。

今回参考にさせていただいたサイトです
マウスオーバーで効果をプラスしたいcss1
マウスオーバーで効果をプラスしたいcss2（ブロック固定あるなし指定あり）
マウスオーバーで文字が降ってくるcss
CSSのみでボーダーをスタイリッシュにアニメーションさせるcss
CSSのみで実装するキャプションエフェクト 20css
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15

cssだけの効果だと、自分流に組み合わせて工夫もできて便利です。

使いたいけどなかなか機会がないのが、画像にオーバーすると画像が拡大するCSS。
だいたいキャプションが画像の下に入ることが多く高さを指定ずにサイズが固定されないのが残念。。。

解決策がまだ見当たらないのですが、方法は他にもありそうなので探してトライしていきたいと思います。