CSS(CSS3)だけでマウスを置くと画像が変わるキャプションエフェクトを設定する方法

23.11.14 02:55 | コメント(0)

CSS3(スタイルシート)で角丸を設定

今までのCSS(スタイルシート)では、マウスを置くと画像が変わる(文字が表示される)、オンマウス時のキャプションエフェクトなどをJavaScriptなどで配置していましたが、CSS3になり、スタイルシートでマウスを置くと画像が変わる(文字が表示される)設定を出来るようになりました。
CSS3でマウスを置くと画像が変わる(文字が表示される)設定方法をご紹介いたします。

css01.jpg

キャプションeffect01

マウスを置くと画像の上に文字が表示


【マウスを置くと画像が変わるキャプションエフェクト01】
.effect01 figure {
	position: relative;
	overflow: hidden;
}
.effect01 figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}
.effect01 figure:hover figcaption {
	opacity: 1;
}

css01.jpg

キャプションeffect02

マウスを置くと画像の上に文字が表示


【マウスを置くと画像が変わるキャプションエフェクト02】
.effect02 figure {
	position: relative;
	overflow: hidden;
}
.effect02 figcaption {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
.effect02 figure:hover figcaption {
	top: 0;
	left: 0;
}

css01.jpg

キャプションeffect03

マウスを置くと画像の上に文字が表示


【マウスを置くと画像が変わるキャプションエフェクト03】
.effect03 figure {
	position: relative;
	overflow: hidden;
}
.effect03 figcaption {
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
.effect03 figure:hover figcaption {
	top: 0;
	left: 0;
}

css01.jpg

キャプションeffect04

マウスを置くと画像の上に文字が表示


【マウスを置くと画像が変わるキャプションエフェクト04】
.effect04 figure {
	position: relative;
	overflow: hidden;
}
.effect04 figcaption {
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
.effect04 figure:hover figcaption {
	top: 0;
	left: 0;
}

css01.jpg

キャプションeffect05

マウスを置くと画像の上に文字が表示


【マウスを置くと画像が変わるキャプションエフェクト05】
.effect05 figure {
	position: relative;
	overflow: hidden;
}
.effect05 figcaption {
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
.effect05 figure:hover figcaption {
	top: 0;
	left: 0;
}

css01.jpg

キャプションeffect06

マウスを置くと画像の上に文字が表示


【マウスを置くと画像が変わるキャプションエフェクト06】
.effect06 figure {
	position: relative;
	overflow: hidden;
}
.effect06 figcaption {
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
.effect06 figure:hover figcaption {
	top: 0;
	left: 0;
}

css01.jpg

キャプションeffect07

マウスを置くと画像の上に文字が表示


【マウスを置くと画像が変わるキャプションエフェクト07】
.effect07 figure {
	position: relative;
	overflow: hidden;
}
.effect07 figcaption {
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
.effect07 figure:hover figcaption {
	top: 0;
	left: 0;
}

css01.jpg

キャプションeffect08

マウスを置くと画像の上に文字が表示


【マウスを置くと画像が変わるキャプションエフェクト08】
.effect08 figure {
	position: relative;
	overflow: hidden;
}
.effect08 figcaption {
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
.effect08 figure:hover figcaption {
	top: 0;
	left: 0;
}

css01.jpg

キャプションeffect09

マウスを置くと画像の上に文字が表示


【マウスを置くと画像が変わるキャプションエフェクト09】
.effect09 figure {
	position: relative;
	overflow: hidden;
}
.effect09 figcaption {
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
.effect09 figure:hover figcaption {
	top: 0;
	left: 0;
}


以上がCSSでマウスを置くと画像が変わるキャプションエフェクトの設定方法が完了です。
カテゴリ:CSS3, HTML5 + CSS3の基礎, WEB屋になる為の知識と技術

Facebookでコメントする

コメントする

おすすめの記事

Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

PAGE TOP