マウスオーバーで画像にキャプション

flower02

画像をマウスオーバーした時に、下から1/3くらいの高さでタイトルとキャプションを表示させる方法。

flower

Flower Illust

これは手描きの花です。

HTML

<figure><img class="alignnone size-medium wp-image-2830" src="http://www.design-wave.net/wp-content/uploads/2015/03/flower-300x225.jpg" alt="flower" width="300" height="225" />
<figcaption>
<h3>Flower Illust</h3>
これは手描きの花です。
</figcaption></figure>

CSS

figure {
	position: relative;
	overflow: hidden;
	width: 300px;
	height: 225px;
}

figcaption {
	position: absolute;
	bottom: -60px;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 60px;
	background: rgba(255,255,255,.5);
	-webkit-transition: .3s;
	transition: .3s;
}

figure:hover figcaption {
	bottom: 0;
}

figcaption h3 {
	font-size: 1em;
	font-weight: normal;
	margin: 5px auto 3px;
	text-align: center;
	color: #333333;
}

figcaption p {
	font-size: .85em;
	font-weight: normal;
	margin: 3px auto 5px;
	text-align: center;
	color: #666666;
}

figureのwidthとheightは、画像の横と縦のサイズです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>