Zoom in on image in row block when hover over

[ehempton]

ehempton

March 4, 2022 at 2:02 am

Hi,

I’d like to know if it is possible with some custom CSS code to zoom in on an image in a row. I have 3 rows with 3 columns and each has a picture and some text. When I hover over with the mouse I would like the image to grow/zoom.

I was able to do this with my blog page but cannot see to find the right values for the row block. This is the code for my blog page which I was hoping to reuse.

.archive #main .inside-article:hover, .blog #main .inside-article:hover {
box-shadow: 0 0 20px rgb(0,0,0, .2);
border-color: lightblue;
}

.archive #main .inside-article:hover .post-image img, .blog #main .inside-article:hover .post-image img {
transform: scale(1.05);
}

.archive #main .inside-article .post-image img, .blog #main .inside-article .post-image img {
transition: transform .2s;
}

Any ideas?

Thanks