NAKAZI LAB.(ナカジラボ)

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

画像をマウスオーバーした時、同じエリアにテキストを表示する

2013年8月30日jQueryのみでつくるギミック

画像をマウスホバーした時に同エリアに文字を表示する

画像にマウスを乗せた時、画像の上に任意のテキストをフェードインさせる方法です。画像からマウスを外すと元の画像が表示されます。

デモページ

JavaScript

(function($){
	$(function() {
		
		$('figure').hover(function(){
			$(this).find('figcaption').fadeIn();
		}, function() {
			$(this).find('figcaption').fadeOut();
		});	
			
	});
})(jQuery);

HTML

<figure>
	<img src="img.png" width="300" height="300" />
	<figcaption>caption</figcaption>
</figure>

CSS

figure {
	width: 300px;
	height: 300px;
	position: relative;
	margin: 0 auto;
}
figure img {
	position: absolute;
	left: 0;
	top: 0;
}
figure figcaption {
	position: absolute;
	left: 0;
	top: 0;
	width: 300px;
	height: 300px;
	display: none;
	background: #000;
	color: #fff;
	box-sizing: border-box;
	padding: 13px 12px;
}

デモページ

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

関連記事

  1. 画像をマウスオーバーした時、同じエリアにテキストを表示する

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

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

連絡先

nakazilab[atmark]gmail.com