ボタンタイトルのテキスト

<div class="imageButton--type003">
	<a href="#">
		<figure class="button__image"><img src="画像のパス" width="" height="" alt="" /></figure>
		<p class="button__title"><span>ボタンタイトルのテキスト</span></p>
	</a>
</div>
                

.imageButton--type003 {
	a{
		display:inline-block;
		position:relative;
		z-index:1;
		>.button__image{
			overflow:hidden;
			img{
				width:100%;
				height:auto;
				transition: transform 0.3s ease;
				z-index:-1;
			}
		}
		>.button__title{
			opacity:0;
			width:100%;
			height:100%;
			display:flex;
			justify-content:center;
			align-content:center;
			flex-wrap:wrap;
			color:#FFF;
			font-size:0.9em;
			position:absolute;
			top:0;
			left:0;
			transition: 0.3s ease-in-out;
			background:rgba(0,0,0,.5);
			line-height:1.2em;
			&::after{
				content: "";
				width: 0.8em;
				height: 0.8em;
				display: block;
				background: url("/img/icon/arrow-right.svg") no-repeat center center;
				background-size: 100% auto;
				filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
						hue-rotate(228deg) brightness(106%) contrast(101%);
				position:absolute;
				bottom:0.5em;
				right:0.5em;
			}
			span{
				display: inline-block;
				padding:0 0.5em;
				text-align:center;
			}
		}
		&:hover{
			>.button__title{
				opacity:1;
				width:94%;
				height:86%;
				position:absolute;
				top:7%;
				left:3%;
			}
		}
	}
}
@media print, screen and (min-width: 768px) {
	.imageButton--type003 a{
		>.button__title{
			font-size:1.2em;
		}
	}
}