.mediator-image {
    overflow: hidden;
}

.mediator-image:hover .mediator-primary-triangles:before,
.mediator-image:focus .mediator-primary-triangles:before {
    border-width: 15vw 20vw 0 0;
}

.mediator-image:hover .mediator-primary-triangles:after,
.mediator-image:focus .mediator-primary-triangles:after {
    border-width: 15vw 0 0 20vw;
}

.mediator-image:hover .mediator-secondary-triangles:before,
.mediator-image:focus .mediator-secondary-triangles:before {
    border-width: 17vw 23vw 0 0;
}

.mediator-image:hover .mediator-secondary-triangles:after,
.mediator-image:focus .mediator-secondary-triangles:after {
    border-width: 17vw 0 0 23vw;
}

.mediator-image:hover .mediator-learn-more,
.mediator-image:focus .mediator-learn-more {
    opacity: 1;
    bottom: 0;
}

.mediator-image:hover .mediator-title,
.mediator-image:focus .mediator-title {
    opacity: 0;
    bottom: -1em;
}

.mediator-learn-more {
    opacity: 0;
    bottom: -1em;
    transition: opacity .3s ease, bottom .6s ease;
}

.mediator-title {
    opacity: 1;
    bottom: 0;
    transition: opacity .3s ease, bottom .6s ease;
}

.mediator-title,
.mediator-learn-more {
    position: absolute;
    left: 0;
    color: #fff;
    padding: 1em;
}

.mediator-primary-triangles:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15vw 15vw 0 0;
    border-color: rgba(0,0,0,.5) transparent transparent transparent;
    top: 0;
    left: 0;
    transition: border-width .6s ease;
    transition-delay: .15s;
}

.mediator-primary-triangles:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15vw 0 0 15vw;
    border-color: transparent transparent transparent rgba(0,0,0,.5);
    bottom: 0;
    left: 0;
    transition: border-width .6s ease;
}

.mediator-secondary-triangles:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 17vw 17vw 0 0;
    border-color: rgba(255,255,255,.1) transparent transparent transparent;
    top: 0;
    left: 0;
    transition: border-width .6s ease;
    transition-delay: .15s;
}

.mediator-secondary-triangles:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 17vw 0 0 17vw;
    border-color: transparent transparent transparent rgba(255,255,255,.1);
    bottom: 0;
    left: 0;
    transition: border-width .6s ease;
}