#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;
}

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

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

@keyframes animb {

    0% {filter: blur(4.5px) brightness(1.6) contrast(1.6) opacity(0);}
    25% {filter: blur(4.5px) brightness(1.6) contrast(1.6) opacity(0);}
    50% {filter: blur(4.5px) brightness(1.6) contrast(1.6) opacity(0.5);}
    /* 75% {filter: blur(4.5px) brightness(1.6) contrast(1.6) opacity(1);} */
    100% {filter: blur(0px) brightness(1) contrast(1) opacity(1);}

}

@keyframes animf {

    0% {filter: blur(0px) brightness(1) contrast(1) opacity(1);}
    25% {filter: blur(10px) brightness(1.2) contrast(1.8) opacity(1);}
    50% {filter: blur(10px) brightness(1.2) contrast(1.8) opacity(0.5);}
    /* 75% {filter: blur(10px) brightness(1.2) contrast(1.8) opacity(0);} */
    100% {filter: blur(10px) brightness(1.2) contrast(1.8) opacity(0);}

}