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

<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;
    }
  }
}