css - animation effect on hover with multiple classes which having pseudo element

Question

These are the divs which i wanna show 'on hover' with animation effect

.lay-1:after, .lay-3:after, .lay-5:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 131, 187, 0.25);
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-35deg);
    -ms-transform: skew(-35deg);
    transform: skew(-35deg);
    transition:0.5s;
    display:none;
}

and here i am showing on hover

.portfolio-img:hover .lay-1::after {
    display:block;
}


.portfolio-img:hover .lay-3::after {
    display:block;
}
.portfolio-img:hover .lay-5::after {
    display:block;
}

but it does not give animation effect, how this can be achieved in best way??