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