.img_area{overflow:hidden;position:relative}.img_area:before{background-color:#0009;inset:0;z-index:1}.img_area:after,.img_area:before{content:"";opacity:0;position:absolute;transition:opacity .3s ease-in-out}.img_area:after{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD4SURBVHgB7ZbhDcIgEEYP4wCO0A3sCk7iKF3BEXSTbqAj1Al0A7ya7wcxMYUDjja5l1xo4O760hICkWEYhpGDi0303nc8dFSWyTk3UUlYdPDlGWLfv6ONsBnRfULujWMkGReOnjKIFsWmnygR3odXypScqfrrIXkOpt4kpJroH8kTrYlZ8ucYenH0WBMdT6qSWG8vuiSJnLaiMZLIaycaK4ncNqIpksjXF02VRI2uqEQSdXqiUknU6ojmSKK+vmiuJHrUFS0hiT71REtJopdIdPE+ys0OPByDqe8tiO+nD5IxBs9PKsksy3HP+ZJqQHbdkoZhGIahxgdRCXgFpdxEhwAAAABJRU5ErkJggg==) no-repeat 50%;background-size:contain;height:40px;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;z-index:2}.img_area:hover:after,.img_area:hover:before{opacity:1}