CSSでマウスホバー時のREAD MOREアニメーションを作る

2017.9.27 Coding,Design tips Tags:CSS HTML

よくブログなどで見かけるマウスホバーすると画像が暗くなってREAD MOREと文字が表示されるアニメーションを作ってみたいと思います。画像にマウスを乗せた時のホバーアニメーションって案外どうするか悩みますよね。今現在このブログも特になにもつかっていません。でもこのアニメーションを使うとそれっぽく見えてホームページが様になると思います。

1.基本のHTML
2.CSS擬似要素:beforeで画像を覆う背景を作る
3.CSS擬似要素:afterでREAD MOREを表現する
4.通常時はREAD MOREを非表示にする
5.マウスホバー時の指定
6.マウスホバーアニメーション別パターン

DEMO

1.基本のHTML

まずは基本のHTMLから。HTMLはとくに難しいことはしておらず、3カラムのリストです。ブログでよく使いそうな形にしました。

<div class="container">
<h1>画像をマウスホバーした時のREAD MOREアニメーション</h1>
<ul class="readme-list">
<li><p class="img"><a href=""><img src="image/1.jpg" width="500" height="333" /></a></p>Lorem ipsum</li>
<li><p class="img"><a href=""><img src="image/2.jpg" width="500" height="281" /></a></p>Lorem ipsum</li>
<li><p class="img"><a href=""><img src="image/3.jpg" width="500" height="333" /></a></p>Lorem ipsum</li>
</ul>
</div>

<h1>画像をマウスホバーした時のREAD MOREアニメーション</h1>

<li><p class="img"><a href=""><img src="image/1.jpg" width="500" height="333" /></a></p>Lorem ipsum</li>

<li><p class="img"><a href=""><img src="image/2.jpg" width="500" height="281" /></a></p>Lorem ipsum</li>

<li><p class="img"><a href=""><img src="image/3.jpg" width="500" height="333" /></a></p>Lorem ipsum</li>

</ul>

</div>

2.CSS擬似要素:beforeで画像を覆う背景を作る

今回の記事に関係のないであろう細かいデザインのCSSはソースを見てもらうとして、まず画像を囲んでいる< p> 要素（ここではimageというクラスをつけています）にposition:relativeを指定し、これから作っていく要素の親要素とします。そしてclass="img"のa要素に擬似要素:beforeをつけます。before（前）です。擬似要素では指定した要素の前後にテキストやアイコンなど様々なものを入れることができます。

.readme-list .image img{
	width:100%;//imgのwidthは100%にしておく
	height:auto;
}

.readme-list .image{
	height:150px;
	margin-bottom:5px;
	overflow:hidden;
	position:relative;//親要素
}
.readme-list li .image a::before{
	content:'';
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	height:150px;
	background:#000;
	opacity:0;//透明にしておく
	transition:opacity 0.3s linear;//表示する際のアニメーションをここで指定
}

.readme-list .image img{

width:100%;//imgのwidthは100%にしておく

height:auto;

}

.readme-list .image{

height:150px;

margin-bottom:5px;

overflow:hidden;

position:relative;//親要素

}

.readme-list li .image a::before{

content:'';

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

height:150px;

background:#000;

opacity:0;//透明にしておく

transition:opacity 0.3s linear;//表示する際のアニメーションをここで指定

}

position:absoluteの値は全て0にし、高さも画像で設定している高さに合わせておきます。そして、背景色を黒に、opacityは0にします。さらにtransitionも加えておきます（transitionでアニメーションをつけます。）。transitionについては「CSSのみで横並びのプルダウンメニューを作る」の記事で少しだけ触れてますので、よかったら合わせてご覧ください。

3.CSS擬似要素:afterでREAD MOREを表現する

続いてREAD MOREを作りたいと思います。READ MOREはCSSの擬似要素:after（後）で作ります。

.readme-list li .image a::after{
	content:'READ MORE';
	position:absolute;
	top:55.5px;
	z-index:10;
	left:50%;
	display:block;
	width:150px;
	padding:10px 0;
	margin-left:-75px;
	border:3px solid #fff;
	color:#fff;
	text-align:center;
	letter-spacing:2px;
	font-size:13px;
}

.readme-list li .image a::after{

content:'READ MORE';

position:absolute;

top:55.5px;

z-index:10;

left:50%;

display:block;

width:150px;

padding:10px 0;

margin-left:-75px;

border:3px solid #fff;

color:#fff;

text-align:center;

letter-spacing:2px;

font-size:13px;

}

contentの中にREAD MOREを入れることでテキストとしてREAD MOREを表示させます。幅150pxのボックスの中にテキストを入れているのですが、このボックスを画像の中央にもってくる必要があります（今回の場合）。position:absoluteで上と左を指定します。まず、左から50%を指定して親要素から半分のところにくるようにします。ところがこれはボックスの左端から50%なのでそのままだと一番左が真ん中に来てしまいます。それを回避するために幅150pxの半分75pxをネガティブマージンで指定して、真ん中にくるように指定します。

次にtopです。トップもさきほどと同じように考えます。今回画像の高さは150pxボックスの文字サイズは13px、paddingは上下10pxを足して20px、ボーダーのサイズ3p×2となりますので、6px、全てを足すと39pxになります。さきほどと同じようにボックスの半分の値と親となる画像の高さの半分の値を出します。すると、ボックスは39÷2=19.5、画像は150÷2=75となります。あとは75-19.5=55.5となりますので、topに55.5pxを指定します。

4.通常時はREAD MOREを非表示にする

通常時はREAD MOREは見えないようにして、マウスホバーの段階で表示させたいので、さきほどのCSSを少し変更します。

.readme-list .image{
	height:150px;
	margin-bottom:5px;
	overflow:hidden;//READ MOREのはみだしを隠す
	position:relative;
}
.readme-list li .image a::after{
	content:'READ MORE';
	position:absolute;
	top:55.5px;
	z-index:10;
	left:150%;//ここを変更
	display:block;
	width:150px;
	padding:10px 0;
	margin-left:-75px;
	border:3px solid #fff;
	color:#fff;
	text-align:center;
	letter-spacing:2px;
	font-size:13px;
	opacity:0;//透明にしておく
	transition:all 0.3s ease-in;//表示する際のアニメーションはここで指定
}

.readme-list .image{

height:150px;

margin-bottom:5px;

overflow:hidden;//READ MOREのはみだしを隠す

position:relative;

}

.readme-list li .image a::after{

content:'READ MORE';

position:absolute;

top:55.5px;

z-index:10;

left:150%;//ここを変更

display:block;

width:150px;

padding:10px 0;

margin-left:-75px;

border:3px solid #fff;

color:#fff;

text-align:center;

letter-spacing:2px;

font-size:13px;

opacity:0;//透明にしておく

transition:all 0.3s ease-in;//表示する際のアニメーションはここで指定

}

まずせっかくさっきleftを指定しましたが、ここでは150%にして画像の外に飛ばしておきます。さきほど指定したleftはホバー時に使います。この時画像のクラスにoverflow:hiddenを指定してはみ出した値を隠すようにします。opacity:0を追加してtransitionは全てを適用するプロパティallにしています。

5.マウスホバー時の指定

マウスホバー時の設定です。最初に作った黒い背景のホバー時の動きは画像が薄暗くなるようにしたいので、下記のように指定します。

.readme-list li .image a:hover::before{
	opacity:0.5;
}

.readme-list li .image a:hover::before{

opacity:0.5;

}

最初にtransitionで動きをつけているので動きをつけた状態になってると思います。これで背景の黒は完成です。続いてREAD MOREのボックスです。

.readme-list li .image a:hover::after{
	opacity:1;
	left:50%;
}

.readme-list li .image a:hover::after{

opacity:1;

left:50%;

}

ここでさきほど書き直したleft:50%を使います。そして、非表示だったopacityを1にして表示させます。以上で完成となります。

DEMO

6.マウスホバーアニメーション別パターン

さきほどのREAD MOREを少し変えて別パターンを作ってみました。

下から登場するパターン

DEMO

.readme-list li .image a::after{
	content:'READ MORE';
	position:absolute;
	top:150%;//ここを変更
	z-index:10;
	left:50%;//ここを変更
	display:block;
	width:150px;
	padding:10px 0;
	margin-left:-75px;
	border:3px solid #fff;
	color:#fff;
	text-align:center;
	letter-spacing:2px;
	font-size:13px;
	transition:top 0.3s ease-in;//opacityを削除してtopに設定
}

.readme-list li .image a:hover::after{
	opacity:1;
	top:55.5px;//ここを変更
}

.readme-list li .image a::after{

content:'READ MORE';

position:absolute;

top:150%;//ここを変更

z-index:10;

left:50%;//ここを変更

display:block;

width:150px;

padding:10px 0;

margin-left:-75px;

border:3px solid #fff;

color:#fff;

text-align:center;

letter-spacing:2px;

font-size:13px;

transition:top 0.3s ease-in;//opacityを削除してtopに設定

}

.readme-list li .image a:hover::after{

opacity:1;

top:55.5px;//ここを変更

}

ふんわり出現するパターン

DEMO

.readme-list li .image a::after{
	content:'READ MORE';
	position:absolute;
	top:55.5px;//ここを変更
	z-index:10;
	left:50%;//ここを変更
	display:block;
	width:150px;
	padding:10px 0;
	margin-left:-75px;
	border:3px solid #fff;
	color:#fff;
	text-align:center;
	letter-spacing:2px;
	font-size:13px;
	opacity:0;
	transition:opacity 0.3s ease-in;//ここを変更
}

.readme-list li .image a:hover::after{
	opacity:1;
}

.readme-list li .image a::after{

content:'READ MORE';

position:absolute;

top:55.5px;//ここを変更

z-index:10;

left:50%;//ここを変更

display:block;

width:150px;

padding:10px 0;

margin-left:-75px;

border:3px solid #fff;

color:#fff;

text-align:center;

letter-spacing:2px;

font-size:13px;

opacity:0;

transition:opacity 0.3s ease-in;//ここを変更

}

.readme-list li .image a:hover::after{

opacity:1;

}

topやleftなどの値は使用せず、ただopacity0から1に表示するようにしました。他にもtransitionのアニメーションを変えるだけで様々なパターンが作れそうですね。

＜ OLD POST NEW POST ＞

CSSでマウスホバー時のREAD MOREアニメーションを作る

CONTENTS

DEMO

1.基本のHTML

2.CSS擬似要素:beforeで画像を覆う背景を作る

3.CSS擬似要素:afterでREAD MOREを表現する

4.通常時はREAD MOREを非表示にする

5.マウスホバー時の指定

DEMO

6.マウスホバーアニメーション別パターン

下から登場するパターン

DEMO

ふんわり出現するパターン

DEMO

コメントを残すコメントをキャンセル

Search

New post

Category

CSSでマウスホバー時のREAD MOREアニメーションを作る

CONTENTS

1.基本のHTML

2.CSS擬似要素:beforeで画像を覆う背景を作る

3.CSS擬似要素:afterでREAD MOREを表現する

4.通常時はREAD MOREを非表示にする

5.マウスホバー時の指定

6.マウスホバーアニメーション別パターン

下から登場するパターン

ふんわり出現するパターン

コメントを残す コメントをキャンセル

Search

New post

Popular post

Category

Tag cloud

Related Posts

コメントを残すコメントをキャンセル