css - 具有多个具有伪元素的类的悬停时的动画效果

Question

这些是我想在“悬停”时显示动画效果的div

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

这里我正在悬停

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


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

但它不会给动画效果，如何以最佳方式实现？