CSS/画像の上に文字を表示

#sample div {
	width: 150px;
	height: 150px;
	margin: 15px 5px 10px 15px;
	padding: 0;
	position: relative; /* 相対位置指定 */
	display: inline-block;
	overflow: hidden;	
}
#sample img {
	width: 100%;
	height: 100%;
}

#sample1 p {
	width: 100%;
	font-size: 15px;
	text-align: center;
	bottom:	0px;
	margin: 0;
	color: #fff;
	background: rgba(0,0,0,0.5); /* 帯の透明度 */
	position: absolute; /* 絶対位置指定 */
}

#sample2 p {
	position: absolute;
	width: 100%;
	height:	15%;
	font-size: 15px;
	text-align: center;
	top: 0px;
	margin:	0;
	color: #fff;
	background: rgba(0,0,0,0.4);
	animation: slide 5s ease-out 1s infinite alternate;
}
@keyframes slide {
	0% { top: 0px; }
	45% { top: 85%;}
	100% { top: 0px; }
}

#sample3 p {
	position: absolute;
	width: 20%;
	height:	100%;
	font-size: 15px;
	-ms-writing-mode: tb-rl; /* for MS IE8+ */
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	text-align: center;
	top: 0px;
	margin:	0;
	color: #fff;
	background: rgba(0,0,0,0.5);
	animation: slide2 5s ease-out 1s infinite alternate;
}
@keyframes slide2 {
	0% { left: 0px; }
	45% { left: 80%;}
	100% { left: 0px; }
}

#sample4 p {
	position: absolute;
	width: 100%;
	height:	100%;
	font-size: 15px;
	text-align: center;
	top: 0px;
	margin:	0;
	color: #fff;
	background: rgba(0,0,0,0.5);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#sample4:hover p {
	top: -150px;	/* ホバーで下にずらす */
}

#sample5 p {
	position: absolute;
	width: 100%;
	height:	100%;
	font-size: 15px;
	text-align: center;
	top: 0px;
	margin:	0;
	color: #fff;
	background: rgba(0,0,0,0.5);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#sample5:hover p {
	top: 125px;	/* ホバーで下にずらす */
}

#sample6 p {
	position: absolute;
	width: 100%;
	height:	100%;
	font-size: 15px;
	text-align: center;
	top: 0px;
	margin:	0;
	color: #fff;
	background: rgba(0,0,0,0.5);
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
	-webkit-transform: scale(1);	/* 大きさを０にして表示しない */
	transform: scale(1);
}
#sample6:hover p {
	-webkit-transform: scale(0);	/* 大きさを０にして表示しない */
	transform: scale(0);
}

#sample7 p {
	position: absolute;
	width: 100%;
	height:	100%;
	font-size: 15px;
	text-align: center;
	top: 0px;
	margin:	0;
	color: #fff;
	background: rgba(0,0,0,0.5);
	transform: rotate(0deg) scale(1);
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
#sample7:hover p {
	transform: rotate(180deg) scale(0);
}

#sample8 p {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: auto;
	font-size: 15px;
	text-align: center;
	margin:	0;
	color: #fff;
	background: rgba(0,0,0,0.5);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg) translate(-45px,-15px);
}