images Hover image with an animation effect

Site URL: https://www.maimouavang.com/

I want the images on the homepage to have a darkening effect when the mouse hovers over it. Similar like this website: https://www.allanchong.com/

I also want to try out the zoom in effect where the mouse hovers. Would be great to know if that's possible too. 

Thank you in advance!

Add to Design > Custom CSS

/* Homge image hover */
div#page-section-61cead349673080e2f98cdf0 {
/* set overlay */
figure a:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    z-index: 900;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.image-block img {
    transition: all 0.5s;
}
/* show overlay on hover */
.image-block:hover figure a:after {
    opacity: 1;
}
figure a {
    position: relative;
}
.image-block:hover figure img {
    transform: scale(1.2);
}}