rehab Image mask prototype

by stopsatgreen

HTML

<div><img src="//placehold.it/300x300" /></div>

SCSS

$image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0ODEgNDgxIj48cGF0aCBkPSJNLjUuNXY0ODBoNDgwdi00ODBoLTQ4MHptMjM1LjAzMSA1Ny40MDZsNTcgMTE2LjU5NCAxMjguMzc1IDE5LjE1Ni05My4yODEgOTAuMjUgMjEuNDM4IDEyOC4wMzEtMTE0LjY1Ni02MC44NDQtMTE1LjEyNSA1OS45NjkgMjIuNDM4LTEyNy44NzUtOTIuNTk0LTkwLjkzOCAxMjguNTMxLTE4LjE4OCA1Ny44NzUtMTE2LjE1NnoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=';
div {
    position: relative;
    width: 50%;
    transition: 1.5s;
    
    &:hover { width: 100%; }
        
    &::after {
        background-image: url($image);
        content: '';
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
img {
    height: auto;
    width: 100%;
}