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

<div class="imageButton--type001">
	<a href="#">
		<figure class="button__image">
			<img src="通常状態の画像のパス" width="" height="" alt="" />
			<img src="ホバーすると現れる画像のパス" width="" height="" alt="" />
		</figure>
		<p class="button__title"><span>ボタンタイトルのテキスト</span></p>
	</a>
</div>
                

.imageButton--type001 {
	a{
		display:block;
		position:relative;
		z-index:1;
		>.button__image{
			overflow:hidden;
			img{
				width:100%;
				height:auto;
				z-index:-1;
				&:nth-child(1){
					transition: opacity 0.3s ease;
				}
				&:nth-child(2){
					position:absolute;
					top:0;
					left:0;
				}
			}
			&::after {
				content: "";
				width: 1.5em;
				height: 1.5em;
				display: block;
				background: url("/img/icon/long-arrow-right.svg") no-repeat center center;
				background-size: 100% auto;
				position: absolute;
				bottom:0.5em;
				right:0.5em;
				z-index:1;
			}
		}
		>.button__title{
			width:100%;
			height:100%;
			display:flex;
			justify-content:center;
			align-content:center;
			flex-wrap:wrap;
			color:#000;
			font-size:1em;
			line-height:1.2em;
			background:rgba(255,255,255,.5);
			position:absolute;
			top:0;
			left:0;
			transition: opacity 0.3s ease;
			span{
				display: inline-block;
				padding:0 0.5em;
			}
		}
		&:hover{
			>.button__image img:nth-child(1){
				opacity:0;
			}
			>.button__title{
				opacity:0;
			}
			&::before{
				opacity:.2;
			}
		}
	}
}
@media print, screen and (min-width: 768px) {
	.imageButton--type001 a{
		>.button__title{
			font-size:1.3em;
		}
	}
}