#outerholder {
    max-width: 600px;
}

#imgholder img {
    position: absolute;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.pic {
    filter: sepia(0.5) saturate(0.8);
}

.bpic {
    animation: animb 1.5s linear forwards;
}

.fpic {
    animation: animf 1.5s linear forwards;
}

@keyframes animb {
    0% {filter: sepia(0) saturate(1.2); opacity: 0;}
    25% {filter: sepia(0) saturate(1.2); opacity: 0;}
    90% {filter: sepia(0.4) saturate(1.2); opacity: 1;}
    100% {filter: sepia(0.5) saturate(0.8); opacity: 1;}
}

@keyframes animf {
    0% {filter: sepia(0.5) saturate(0.8); opacity: 1;}
    25% {filter: sepia(0)  saturate(1.2); opacity: 1;}
    90% {filter: sepia(0.5)  saturate(1.2); opacity: 0;}
    100% {filter: sepia(0)  saturate(1.2); opacity: 0;}
}