NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

マウスオーバーで写真のキャプションをアニメーション付きでクールに表示する

2015年7月29日CSSテクニック

マウスオーバーで写真のキャプションをアニメーション付きでクールに表示する

写真の上にマウスを乗せた時に、写真を薄暗くしてキャプションをアニメーションさせながら表示します。

デモページ

HTML

<div class="thumbnail">
	<a href="javascript:void(0);">
		<div class="img"><img src="img.jpg"></div>
 		<div class="caption">
			<div class="captionContent">
				<h3 class="title">Title</h3>
				<span class="line"></span>
				<p class="description">Description</p>
			</div>
		</div>
	</a>
</div>

CSS

.thumbnail {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	position: relative;
}
.thumbnail a {
	text-decoration: none;
	color: #ffffff;
}
.thumbnail .img {
	position: absolute;
	z-index: 0;
}
.caption {
	display: table;
	position: absolute;
	background-color: rgba(00,00,00,0);
	width: 100%;
	height: 300px;
	text-align: center;
	z-index: 1;
	transition: .2s linear;
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	-o-transition: .2s linear;
	-ms-transition: .2s linear;
}
.caption .captionContent {
	display: table-cell;
	vertical-align: middle;
}
.caption .title {
	opacity: 0;
	font-size: 22px;
	transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transition: .2s linear;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-outr;
	-ms-transition: .2s ease-in-out;
}
.caption .line {
	display: block;
	background-color: #dddddd;
	width: 0%;
	height: 1px;
	margin: 6px auto 10px;
	transition: .2s ease-in-put;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out;
}
.caption .description {
	opacity: 0;
	font-size: 12px;
	transform: translateY(100%);
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transition: .2s linear;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-outr;
	-ms-transition: .2s ease-in-out;
}
a .caption .description {
	color: #dddddd;
}
a:hover .caption {
	background-color: rgba(00,00,00,.6);
}
a:hover .caption .title {
	opacity: 100;
	transform: translateY(0%);
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-ms-transform: translateY(0%);
	-o-transform: translateY(0%);
}
a:hover .caption .line {
	width: 60%;
}
a:hover .caption .description {
	opacity: 100;
	transform: translateY(0%);
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-ms-transform: translateY(0%);
	-o-transform: translateY(0%);
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. マウスオーバーで写真のキャプションをアニメーション付きでクールに表示する

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com