WEB制作の際によく実装する、使い勝手の良いキャプションエフェクトを紹介します。
これらのエフェクトはすべてCSSで実現可能です。

 

キャプションエフェクトサンプル

マスクをかけるエフェクト

キャプションをここに表示
キャプションをここに表示
キャプションをここに表示

HTML

 

CSS

 

マスクをかけた後にテキストを左からスライドインさせるエフェクト

キャプションをここに表示
キャプションをここに表示
キャプションをここに表示

HTML

 

CSS

 

マスクをかけた後にテキストを上からスライドインさせるエフェクト

キャプションをここに表示
キャプションをここに表示
キャプションをここに表示

HTML

 

CSS

 

マスクごと左からスライドインさせるエフェクト

キャプションをここに表示
キャプションをここに表示
キャプションをここに表示

HTML

 

CSS

 

マスクごと上からスライドインさせるエフェクト

キャプションをここに表示
キャプションをここに表示
キャプションをここに表示

HTML

 

CSS

 

下からキャプションマスクが途中まで出てくるエフェクト

キャプションをここに表示

HTML

 

CSS

 

 

おすすめの記事