@mixin sprite($height, $width){
    %sprited-picto{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: opacity, 0.5s, ease, 0s;
    }
    &.sprite, .sprite{
        position: relative;
        display: inline-block;
        width: $width;
        height: $height;

        .picto{
            @extend %sprited-picto;
            opacity: 1;
        }
        .picto-hover{ 
            @extend %sprited-picto;
            opacity: 0;
        }
    }
    &:hover, &:focus{
        .picto{
            opacity: 0;
        }
        .picto-hover{
            opacity: 1;
        }
    }
}