ホバー画像のポップアウトポップアップ効果を実現するための純粋な CSS のサンプルコード

実施原則

メイングラフィックは、背景と前景の 2 つの要素で構成されています。次のサンプルコードでは、背景要素は疑似要素figure::before表され、前景要素はfigure imgで表されます。マウスをfigure要素の上にhoverと、背景要素が大きくなり、前景要素も大きくなり上方に移動することで、視覚的にポップアップ効果を実現します。

背景要素のfigure::before

前景要素のfigure img

1. overflow: hidden使用する

メイン要素のhtml構造は、 figure要素でラップされたimg要素で構成されます。

<図>
  <img src='./man.png' alt='イルマ'>
</図>

要素hoverときの拡大効果と変位効果を制御するために、 cssに 2 つの変数--hovと--not-hovが設定されています。背景要素を超えたときに前景要素が切り取られないように、 figure要素にoverflow: hidden追加し、 padding-top: 5%を設定します (オプション: ページのズームに動的に応答するために、 clamp()関数を使用してborder-radius動的に設定します)

形 {
  --hov: 0;
  --not-hov: calc(1 - var(--hov));
  表示: グリッド;
  自分自身を配置: 中心;
  マージン: 0;
  パディングトップ: 5%;
  変換: scale(calc(1 - .1*var(--not-hov)));
  オーバーフロー: 非表示;
  境界線の半径: 0 0 クランプ(4em, 20vw, 15em) クランプ(4em, 20vw, 15em);
}
図::before、図画像{
  グリッドエリア: 1/1;
  place-self: 終了センター;
}
図::前{
  コンテンツ： "";
  パディング: クランプ(4em, 20vw, 15em);
  境界線の半径: 50%;
  背景: url('./bg.png') 50%/カバー;
}
図:ホバー{
  --hov: 1;
}
画像 {
  幅: calc(2*clamp(4em, 20vw, 15em));
  境界線の半径: クランプ(4em, 20vw, 15em);
  変換: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));
}

2. clip-path: inset()を使用する

<図>
  <img src='./man.png' alt='イルマ'>
</図>

スタイルは基本的に最初のものと同じで、 clip-pathを使用して円形の背景領域をクリップします。

形 {
  --hov: 0;
  --not-hov: calc(1 - var(--hov));
  表示: グリッド;
  自分自身を配置: 中心;
  マージン: 0;
  パディングトップ: 5%;
  変換: scale(calc(1 - .1*var(--not-hov)));
  クリップパス: inset(0 round 0 0 クランプ(4em, 20vw, 15em) クランプ(4em, 20vw, 15em));
}
図::before、図画像{
  グリッドエリア: 1/1;
  place-self: 終了センター;
}
図::前{
  コンテンツ： "";
  パディング: クランプ(4em, 20vw, 15em);
  境界線の半径: 50%;
  背景: url('./bg.png') 50%/カバー;
}
図:ホバー{
  --hov: 1;
}
図:hover::before {
  ボックスの影: 1px 1px 10px rgba(0, 0, 0, .3);
}
画像 {
  幅: calc(2*clamp(4em, 20vw, 15em));
  境界線の半径: クランプ(4em, 20vw, 15em);
  変換: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));
}

完全な例

<h2>overflow: hidden を使用する</h2>
  <図>
    <img src='./man.png' alt='イルマ'>
  </図>
  <h2>clip-path: path() メソッドを使用する</h2>
  <図>
    <img src='./man.png' alt='イルマ'>
  </図>

体 {
  表示: グリッド;
  背景: #FDFC47;
  背景: -webkit-linear-gradient(右、#24FE41、#FDFC47);
  背景: 線形グラデーション(右、#24FE41、#FDFC47);
}
形 {
  --hov: 0;
  --not-hov: calc(1 - var(--hov));
  表示: グリッド;
  自分自身を配置: 中心;
  マージン: 0;
  パディングトップ: 5%;
  変換: scale(calc(1 - .1*var(--not-hov)));
}
図:n番目の型(1) {
  オーバーフロー: 非表示;
  境界線の半径: 0 0 クランプ(4em, 20vw, 15em) クランプ(4em, 20vw, 15em);
}
図:n番目の型(2) {
  クリップパス: inset(0 round 0 0 クランプ(4em, 20vw, 15em) クランプ(4em, 20vw, 15em));
}
図、図画像 {
  遷移: transform 0.2s イーズインアウト;
}
図::before、図画像{
  グリッドエリア: 1/1;
  place-self: 終了センター;
}
図::前{
  パディング: クランプ(4em, 20vw, 15em);
  境界線の半径: 50%;
  背景: url('./bg.png') 50%/カバー;
  コンテンツ： "";
  遷移: 0.25 秒の線形。
}
図:ホバー{
  --hov: 1;
}
図:hover::before {
  ボックスの影: 1px 1px 10px rgba(0, 0, 0, .3);
}
画像 {
  幅: calc(2*clamp(4em, 20vw, 15em));
  境界線の半径: クランプ(4em, 20vw, 15em);
  変換: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));
}

純粋な CSS でホバー画像のポップアウト効果を実現する方法についての記事はこれで終わりです。より関連性の高い CSS コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: 1 つの記事で Apache Avro データを解析する

>>: Vue プロジェクトでの支払い機能の実装 (WeChat 支払いと Alipay 支払い)