.PicVi {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: solid 1px red;
}

.PicVi .canvas {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    
    border: solid 1px lightblue;
    background: rgba(128,128,255,0.1);
}

.PicVi .canvas {
    transition: all 0.5s ease;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.PicVi .canvas[position="left"] {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.PicVi .canvas[position="left-far"] {
    transform: translateX(-200%);
    -webkit-transform: translateX(-200%);
    display: none;
}

.PicVi .canvas[position="center"] {
    
}

.PicVi .canvas[position="right"] {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);

}

.PicVi .canvas[position="right-far"] {
    transform: translateX(200%);
    -webkit-transform: translateX(200%);
    display: none;
}


.PicVi .canvas[position="hidden"] {
    display: none;
}