背景が出現+テキスト(中央から横に)

画像リンクの動き
-背景が出現+テキスト(中央から横に)-

デモページを見る

See the Pen 7-14 背景が出現+テキスト(中央から横に) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね!

動きを実現する仕組み

マスクの疑似要素beforeに縦横幅100%の背景色を指定し、hoverをしたら0.3秒かけて中央から横に要素を拡大させる。
画像の天地中央位置にいるテキストがhoverをしたら0.5秒かけて透過0→出現。

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/7-14.css">
    </head>
  2. body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
    <div class="bgCW"><a href="#"><span class="mask"><img src="img/07.jpg" alt=""><span class="cap">背景が中央から横に出現+テキスト bgCW</span></span></a></div>

自作のCSS内の書き方

/* 背景が中央から横に出現+テキスト */
.bgCW{
	position:relative;/*テキストの基点となる位置を定義*/
}

.bgCW span.mask{
	position:relative;/*背景色の基点となる位置を定義*/
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.bgCW span.mask::before {
	content:"";
	position: absolute;
	z-index: 2;
	background:#333;/*背景色*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;/*移り変わる速さを変更したい場合はこの数値を変更*/
	transform: scale(0, 1);
	transform-origin: center;
}

.bgCW span.mask:hover::before{/*hoverした時の変化*/
	transform:scale(1, 1);
}

.bgCW span.cap{
	opacity:0;
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	position: absolute;
	z-index:3;/*テキストを前面に出す*/
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;/*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;/*行の高さを1.5にする*/
}

.bgCW a:hover span.cap{/*hoverした時の変化*/
	opacity:1;
}

バリエーション
を見る

「印象」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top