メニュー

WP版キャラチョコブック

Chocobanditz ONLINE

ページトップ

ページボトム

メニュー

Chocobanditz ONLINE

閉じる

DESIGN HTML・CSS Webデザイン

マウスオーバー時にCSSアニメーションで画像付きキャプションを表示する方法

投稿日:2014年6月30日 更新日:

dez_003_img_main

Webページの画像にマウスオーバーした際に、CSSアニメーションで画像付きキャプションを表示する方法の覚書です。

スポンサーリンク

マウスオーバー時にCSSアニメーションで画像付きキャプションを表示する

目次

  1. 01 参考イメージ
  2. 02 HTML部分抜粋
  3. 03 CSS部分抜粋
  4. 04 まとめ

01 参考イメージ

↓画像にマウスカーソルを重ねると

dez_003_img01

↓のような感じで画像付きキャプションが左からスライドイン表示される

dez_003_img02

02 HTML部分抜粋

					<figure id="prfImg">
						<img src="img/prf_img_v3.jpg" alt="プロフィール画像" />
						<figcaption>
							<div id="reco_dish_title">Tittle  ○○○○○○○○○○○○○○○○○○○○○</div>
							<div id="reco_dish_main"><img src="img/reco_dish_img.jpg" alt="画像" id="reco_dish_img"/></div>
							<div id="reco_dish_cap">
								Caption ○○○○○○○○○○○○○○○○○○○○○○○○○○○
							</div>
							<div class="clr"</div>
							<div id="reco_dish_name">Name  ○○○○○○○○○○○○○○○</div>
						</figcaption>
					</figure>

03 CSS部分抜粋

#prfImg {
	position: relative;
	width: 300px;
	height:300px;
	z-index: 1001;//←➀-1
}

#prfImg:hover>img {
		transform: scale(1.15,1.15);//←➁
		-webkit-transform:scale(1.15,1.15);
		-moz-transform:scale(1.15,1.15);
		-ms-transform:scale(1.15,1.15);
		-o-transform:scale(1.15,1.15);
}

#prfImg img { 
		-webkit-transition:all 0.25s ease-in-out;
		transition:all 0.25s ease-in-out;
	}

#prfImg figcaption {
	position: absolute;//←➂-1
	top: 0;//←➂-1
	left: -100%;//←➂-1
	z-index: 1002;//←➀-2
	width: 260px;
	height: 260px;
	padding:20px;
	background: rgba(0,0,0,0.6);
	-webkit-transition: 0.3s;
	transition: 0.3s;
	opacity: 1;
}

#prfImg:hover figcaption {
	top: 0;//←➂-2
	left: 0;//←➂-2
}

#reco_dish_title {
	width: 250px;
	height: 30px;
	font: 100%/30px 'Terminal Dosis', Arial, sans-serif;
	text-align: left;
	color:#ffffff;
	padding:0 0 0 10px;
	background:#7e3179;
	-webkit-transition: 0.6s;
	transition: 0.6s;
	opacity: 0.6;
}

#reco_dish_main {
	width: 140px;	
	height: 200px;
	background:rgba(255,255,255,0.6);
	-webkit-transition: 0.6s;
	transition: 0.6s;
	opacity: 1;
	display: table-cell;
	text-align: center;
	vertical-align: middle;	
}

#reco_dish_cap {
	position: absolute;
	top: 50px;
	left: 160px;
	width: 110px;
	height: 180px;
	padding:10px 10px 10px 0px;
	background:rgba(255,255,255,0.6);
	opacity: 0;
	font: 75%/19px 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,'MS PGothic',sans-serif;
	word-wrap: break-word;
	overflow: hidden;
	text-align:left;
}

#prfImg:hover figcaption #reco_dish_cap {
	opacity: 1;
}

#reco_dish_name {
	width: 250px;
	height: 30px;
	font: 80%/30px 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,'MS PGothic',sans-serif;
	text-align: left;
	color:#333;
	padding:0 0 0 10px;
	background:#ffffff;
	-webkit-transition: 0.6s;
	transition: 0.6s;
	opacity: 1;
}

[動きに関係する部分]

➀-1/➀-2→z-indexプロパティでfigcaption要素がプロフィール画像の手前にくるように配置する。

➁→マウスオーバー時にプロフィール画像を拡大表示する。

➂-1/➂-2→positionプロパティで絶対位置への配置とし、left: -100%;位置に配置したfigcaption要素をマウスオーバー時にtop: 0;left: 0;位置に移動表示する。

04 まとめ

コーディングに際して以下のサイトを参考にさせて頂きました。

  1. IMAGE CAPTION HOVER ANIMATION
  2. CSSのみで実装するキャプションエフェクト 20

ポイントとしては、CSSアニメーションの動きの部分を参考にしながら、キャプションを表示する部分をアレンジしています。
今回紹介したコードは、キャラチョコブックのプロフィール画像に合わせてレイアウトを組んでいるので、各自アレンジして頂ければと思います。動きの部分に関しても、キャラチョコブックは、左からスライドインする動きをチョイスしましたが、他にも様々な動きエフェクが紹介されていて参考になりますよ!

以上

この記事は、
Webページの画像にマウスオーバーした際に、CSSアニメーションで画像付きキャプションを表示する方法をご紹介しました。

スポンサーリンク

-DESIGN, HTML・CSS, Webデザイン

執筆者:


comment

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

MadiaMarkerメディアマーカー

Maerchen_Diverグッズ