テキストを画像の中央に配置したリンクパーツ(高さ固定、ホバーで画像拡大)

[ ID : 11262 ]
こちらの記事はパス会員様向けです。
テキストを画像の中央に配置したリンクパーツ(高さ固定、ホバーで画像拡大)
実装目安
1分

概要

【パス会員限定】テキストを画像の上下左右中央に配置した高さ固定のリンクパーツ。ホバー時に画像が拡大するアニメーション付き。

用途・要件

  • テキストを画像の上下左右中央に配置。
  • 画像上にオーバーレイを配置して、画像を少し暗くする。
  • ホバーすると画像が拡大するCSSアニメーション付き。
  • パーツ全体がリンク範囲。
  • 画像はimg要素で設置。(object-fit: cover; 使用)
  • 高さは固定。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録