Cover Image for CSSでペルソナ5風 hoverエフェクト を作ってみた

CSSでペルソナ5風 hoverエフェクト を作ってみた

概要

をみて CSS の練習にhoverエフェクトを作ってみた

z-index: auto; を理解する
_概要_medium.com

はこれを作るために調べていたもの

作りたかったもの

こんなやつ

できたもの

コード

雑な解説

  • clip-path で作った図形を2つ重ね合わせることで実現している。
  • clip-path 使うと Stacking context が発生して子要素との重ね合わせが大変になるので、before / after の擬似要素に clip-path を適用している
  • 青の五角形と赤の平行四辺形を重ねて、 mix-blend-mode: color-dodge; で重なった部分を白にしている
  • 通常だと after/子要素/before/親要素 の順に重なるが、文字が入ってる子要素を一番上に重ねたかったのでz-indexで順番を入れ替えて子要素が一番上に来るようにしている