<div class="imageButton--type005">
  <a href="#">
    <figure class="button__image"><img src="画像のパス" width="" height="" alt="" /></figure>
  </a>
</div>
                

.imageButton--type005 {
  a{
    display:block;
    position:relative;
    z-index:1;
    >.button__image{
      overflow:hidden;
      img{
        width:100%;
        height:auto;
        transition: transform 0.3s ease;
      }
    }
    &::before {
      content:" ";
      width:100%;
      height:100%;
      display:block;
      position:absolute;
      top:0;
      left:0;
      background:rgba(0,0,0,.3);
      opacity:0;
      transition: opacity 0.3s ease-in-out;
      z-index:1;
    }
    &::after {
      content: "";
      width: 2em;
      height: 2em;
      display: block;
      background: url("/img/icon/search-plus.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;
      top:50%;
      left:50%;
      margin-top:-1em;
      margin-left:-1em;
      opacity:0;
      transition: opacity 0.3s ease-in-out;
      z-index:1;
    }
    &:hover{
      >.button__image img{
        transform: scale(1.1);
      }
      &::before,&::after {
        opacity:1;
      }
    }
  }
}