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

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