Zoom in hover effect on homepage

Site URL: https://marissaginsberg.com

Hi there,

I'm trying to add a simple slight zoom in to the images that are links on my homepage. I haven't been able to find an answer that doesn't apply to all images on my site. Is there a way to do it?

Thank you!

Add to Design > Custom CSS

/* homepage image effect */
body.homepage .image-block img {
    transition: all 0.2s;
}
body.homepage .image-block:hover img {
    transform: scale(1.2);
    transition: all 0.2s;
}
body.homepage .image-block {
    overflow: hidden;
}

Thank you so much!!!

I added the code and it works great! But I realized it's applying the hover to the logos on the homepage and I don't want it to do that. Is there any way to differentiate it so that the hover is only on the project links?

Thanks in advance!

Try new code

/* homepage image effect */
div#page-section-602229b710c48c03e7757b96>.row .image-block img {
    transition: all 0.2s;
}
div#page-section-602229b710c48c03e7757b96>.row .image-block:hover img {
    transform: scale(1.2);
    transition: all 0.2s;
}
div#page-section-602229b710c48c03e7757b96>.row .image-block {
    overflow: hidden;
}