Custom grid with hover effects

I can't figure out to have the following solution.

I want to showcase work in a certain grid (see homepage menu 3.jpg) I have a test made by the client, how he wants to have it worked.
I'm inspired by https://www.henryschofield.co featured work. Also I do like the hover effects. I would also like to have an hover effect where you will see another image/video when hovering.

Since I'm a noobie, I can't figure out how to get this done.

https://seabass-lute-8mzg.squarespace.com
PS = 1234

You can try to customize based on these custom layouts

@tuanphan Thanks! I found your post couple of days ago. I figured out to get it very close to my example. Everytime I refresh/open the website it will change the layout.. Can you help met with that?

Almost correct layout:
(Also the 1:1 are nog 1:1, but more portrait.. is it possible to change that to a 1:1/square?)

Weird layout after opening website/page:

@tuanphan I somehow figured it out to get the right aspect ratio's. Once you figured it out to work with CSS, it is getting easier.

I do now have the following issue. In order to get the right aspect ratio 1:1 i changed the padding en margin.. But the whole blocks are facing more to the left of the page.. is there any code which can move the whole thing?

Also: Is it possible to have the same sort of hover effect with video on it like this example: 
https://www.henryschofield.co featured work

Thanks!

Okay, so i figured out how to get the whole thing measured in the middle. Which is nice..
Next step: is to have a nice hover effect with video on it like this example: 
https://www.henryschofield.co featured work.

Also the mobile version looked very strange.. do i need to insert a different code for that?

New update; as i'm talking to myself haha!

I figured out how to get the hover effect with a second image! I do now have the a problem where my photo/video/gif is in a strange format... I could not figure that out yet.. someone?

Could you help me with this @tuanphan?

Update:

I do have now a hover effect with a second image.. which is nice!
Certain images has white text...(like left images on the second row) which i want to change to a different color. Also the hover effect on certain image i do not want (like left images on the second row)

Is that possible?

Is this something you can help met with @Beyondspace? I've seen your comments and knowledge!

On 6/6/2024 at 2:39 AM, aestetik_studio said:

Update:

I do have now a hover effect with a second image.. which is nice!
Certain images has white text...(like left images on the second row) which i want to change to a different color. Also the hover effect on certain image i do not want (like left images on the second row)

Is that possible?

To change color on left images, use some code like this

a.grid-item[href="/home/product-marketing"] h3 {
    color: #000 !important;
}

With disable hover, I See you figured it out