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

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

.imageButton--type002 {
	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{
			width:96%;
			height:92%;
			display:flex;
			justify-content:center;
			align-content:center;
			flex-wrap:wrap;
			color:#FFF;
			font-size:0.9em;
			position:absolute;
			top:4%;
			left:2%;
			transition: 0.3s ease-in-out;
			background:rgba(0,0,0,.7);
			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;
				vertical-align: middle;
				padding:0 0.5em;
				text-align:center;
				transition:opacity .3s ease;
			}
		}
		&:hover{
			>.button__title{
				background:rgba(0,0,0,.1);
				width:100%;
				height:100%;
				top:0;
				left:0;
				span{
					opacity:0;
				}
			}
		}
	}
}
@media print, screen and (min-width: 768px) {
	.imageButton--type002 a{
		>.button__title{
			font-size:1.2em;
		}
	}
}