*このページは web-dou.com のアーカイブです。(2025年 サイト統合)

画像(イメージ)に文字を重ねるCSSサンプル

TOP > HTML・CSSサンプル >画像(イメージ)に文字を重ねるCSSサンプル
X B! FB LINE

画像(イメージ)に文字を重ねるCSSサンプル

通常の画像と文章

嵯峨野竹林

京都嵯峨野にある竹林

サンプルソースを表示

HTML

<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林</a>
</p>

文章を画像の上部に重ねる

嵯峨野竹林

京都嵯峨野にある竹林

サンプルソースを表示

CSS

.img_box {
	position:relative;
	display:block;
	margin:0;
	padding:0;
}
.img_box img {
	z-index:0;
	margin:0;
	padding:0;
}
.img_box a {
	color:white;
}
.img_box img:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.img_comment {
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
	padding:10px;
	margin:0;
	text-shadow:3px 3px 3px #000;
}
.img_comment a:hover {
	color:blue;
}

HTML

<div class="img_box">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林</a>
</p>
</div>

文章を画像の下部に重ねる

嵯峨野竹林

京都嵯峨野にある竹林

サンプルソースを表示

CSS

.img_box {
	position:relative;
	display:block;
	margin:0;
	padding:0;
}
.img_box img {
	z-index:0;
	margin:0;
	padding:0;
}
.img_box a {
	color:white;
}
.img_box img:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.img_comment2 {
	position:absolute;
	bottom:0px;
	left:0px;
	z-index:1;
	text-align:center;
	padding:10px;
	margin:0;
	text-shadow:3px 3px 3px #000;
}
.img_comment2 a:hover {
	color:white;
}

HTML

<div class="img_box">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林</a>
</p>
</div>

+文章を中央寄せにする

嵯峨野竹林

京都嵯峨野にある竹林

サンプルソースを表示

CSS

.img_box2 {
	position:relative;
	display:block;
	/* 画像と同じサイズ */
	width:200px;
	height:113px;
	margin:10px;
	padding:0;
	background-color:#000;
}
.img_box2 img {
	z-index:0;
	margin:0;
	padding:0;
}
.img_box2 a {
	color:white;
}
.img_box2 img:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.img_comment4 {
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
	margin:0;
	padding:0;
	background-color:#000;
	text-align:center;
	width:200px;
}

HTML

<div class="img_box2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment4">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林</a>
</p>
</div>

+文章に背景をつける

嵯峨野竹林

京都嵯峨野にある竹林を練り歩きました。

サンプルソースを表示

CSS

.img_box2 {
	position:relative;
	display:block;
	/* 画像と同じサイズ */
	width:200px;
	height:113px;
	margin:10px;
	padding:0;
	background-color:#000;
}
.img_box2 img {
	z-index:0;
	margin:0;
	padding:0;
}
.img_box2 a {
	color:white;
}
.img_box2 img:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.img_comment3 {
	position:absolute;
	bottom:0px;
	left:0px;
	z-index:1;
	margin:0;
	padding:5px;
	background-color:#000;
}
.img_comment3 a:hover {
	color:blue;
}

HTML

<div class="img_box2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment3">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林を練り歩きました。</a>
</p>
</div>

+文章の背景を半透明にする

嵯峨野竹林

京都嵯峨野にある竹林を練り歩きました。

サンプルソースを表示 



CSS


.img_box2 {
	position:relative;
	display:block;
	/* 画像と同じサイズ */
	width:200px;
	height:113px;
	margin:10px;
	padding:0;
	background-color:#000;
}
.img_box2 img {
	z-index:0;
	margin:0;
	padding:0;
}
.img_box2 a {
	color:white;
}
.img_box2 img:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.img_comment3 {
	position:absolute;
	bottom:0px;
	left:0px;
	z-index:1;
	margin:0;
	padding:5px;
	background-color:#000;
}
.img_comment3 a:hover {
	color:blue;
}
.opa  {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}



HTML


<div class="img_box2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment3 opa">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林を練り歩きました。</a>
</p>
</div>

+丸みと影をつける

嵯峨野竹林

京都嵯峨野にある竹林を練り歩きました。

サンプルソースを表示

CSS

.img_box2 {
	position:relative;
	display:block;
	/* 画像と同じサイズ */
	width:200px;
	height:113px;
	margin:10px;
	padding:0;
	background-color:#000;
}
.img_box2 img {
	z-index:0;
	margin:0;
	padding:0;
}
.img_box2 a {
	color:white;
}
.img_box2 img:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.opa  {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
.rad1 {
	border-radius:10px;
	overflow:hidden;
}
.shadow2 {
	box-shadow:1px 1px 5px #000;
}

HTML

<div class="img_box2 rad1 shadow2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment3 opa shadow1">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林を練り歩きました。</a>
</p>
</div>

+文章を1行にする

嵯峨野竹林

京都嵯峨野にある竹林を練り歩きました。

サンプルソースを表示

CSS

.img_box2 {
	position:relative;
	display:block;
	/* 画像と同じサイズ */
	width:200px;
	height:113px;
	margin:10px;
	padding:0;
	background-color:#000;
}
.img_box2 img {
	z-index:0;
	margin:0;
	padding:0;
}
.img_box2 a {
	color:white;
}
.img_box2 img:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.shadow2 {
	box-shadow:1px 1px 5px #000;
}
.opa  {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
.ell {
    height:1em;
    overflow:hidden;
}

HTML

<div class="img_box2 shadow2">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">
<img src="/app/web-dou/sample/img/sample3.jpg" alt="嵯峨野竹林" width="200" height="113" />
</a>
<p class="img_comment3 opa ell">
<a href="https://osanpo.info/sBHCAD_%E5%B5%AF%E5%B3%A8%E9%87%8E%E7%AB%B9%E6%9E%97%28%E7%AB%B9%E6%9E%97%E3%81%AE%E5%B0%8F%E5%BE%84%29" target="_blank" title="嵯峨野竹林">京都嵯峨野にある竹林を練り歩きました。</a>
</p>
</div>