Columns Gallery with Lines and moving photos while hover

Site URL: https://evamauermann.com

Hey lovely Squarespace people!

I'm setting up my new website for my photography: https://evamauermann.com (Password: Help) 🙂

On the Landing Homepage I'd like to link my portfolio with three photos, that are clickable and linked to the actual portfolio pages. Right now I already have this and it also works (see Homepage, scroll to Portfolio).

BUT, I have fallen in love with a design I found on another website and I wonder if it's possible to achieve this look with CSS? 🙈
It's this website: https://www.luisaapanui.com/   and scroll down to "Our work" (also see attached files).
It looks like a grid (?) with three embedded photos, that also move to the right when hovering over them.

I also searched on various platforms (will myers, ghost, elfsight, etc.) if this is a plugin that I can buy, but I didn't find anything.

Maybe someone can help, thanks (or knows where I can find this)! 🙏

So now you want photo move right on hover

or you want photo move right on hover + add a border around 3 photos?

If move right on hover, use this code to Website Tools > Custom CSS

section[data-section-id="66e9ea69d23c463c98a03892"] figure:hover {
    transform: translateX(50px);
    transition: all 0.3s;
}
section[data-section-id="66e9ea69d23c463c98a03892"] figure {
    transition: all 0.3s;
}

Hey @tuanphan

thanks so much for your answer!

I would like the photos move right on hover + add a border around 3 photos + titles (like in the photo) 🙂

10 hours ago, tuanphan said:

So now you want photo move right on hover

or you want photo move right on hover + add a border around 3 photos?

If move right on hover, use this code to Website Tools > Custom CSS

section[data-section-id="66e9ea69d23c463c98a03892"] figure:hover {
    transform: translateX(50px);
    transition: all 0.3s;
}
section[data-section-id="66e9ea69d23c463c98a03892"] figure {
    transition: all 0.3s;
}

And this code isn't working 😞  the photos don't move when I hover over them

On 9/20/2024 at 5:44 PM, Journalfloral said:

 

And this code isn't working 😞  the photos don't move when I hover over them

 

I just tested and and it still works here. You can add the code to top of CSS box then check again. If it still doesn't work, you can add and keep the code, I can check easier.

And use this new code for moving + add border

section[data-section-id="66e9ea69d23c463c98a03892"] figure:hover {
    transform: translateX(50px);
    transition: all 0.3s;
}
section[data-section-id="66e9ea69d23c463c98a03892"] figure {
    transition: all 0.3s;
    border: 1px solid black;
    border-radius: 50px;
}

1 hour ago, tuanphan said:

I just tested and and it still works here. You can add the code to top of CSS box then check again. If it still doesn't work, you can add and keep the code, I can check easier.

And use this new code for moving + add border

section[data-section-id="66e9ea69d23c463c98a03892"] figure:hover {
    transform: translateX(50px);
    transition: all 0.3s;
}
section[data-section-id="66e9ea69d23c463c98a03892"] figure {
    transition: all 0.3s;
    border: 1px solid black;
    border-radius: 50px;
}

 

Adding the code to the top of the CSS box worked, thanks! 🙂

Could you also add a border like in the pictures in my first post and also some titels and those little arrows that appear when the photo hovers to the side? 🙏

20 hours ago, Journalfloral said:

 

Adding the code to the top of the CSS box worked, thanks! 🙂

Could you also add a border like in the pictures in my first post and also some titels and those little arrows that appear when the photo hovers to the side? 🙏

 

Border

You mean make 3 items touch together?

Arrow

Static arrow only or clickable arrow?

If clickable, arrow - image will use same link or different link?

Title

You can enable Gallery Section Caption then add some caption to Images, text will appear under image

55 minutes ago, tuanphan said:

Border

You mean make 3 items touch together?

Arrow

Static arrow only or clickable arrow?

If clickable, arrow - image will use same link or different link?

Title

You can enable Gallery Section Caption then add some caption to Images, text will appear under image

Border

You mean make 3 items touch together?

-> Yes, see picture above (orange). It looks like a table with three columns and one row. And with a thin border.

Arrow

Static arrow only or clickable arrow?

If clickable, arrow - image will use same link or different link?

--> see picture above (red). The arrow appears when the photo has moved to the side. The arrow should be clickable and linked to the same link as the image is at the moment.

Title

You can enable Gallery Section Caption then add some caption to Images, text will appear under image

--> see picture above (blue). Would like to have the titels under (1. photo), above (2. photo), under (3. photo) and I would also like to be able to change font, size, etc.

Thanks!

With title, you can enable Gallery Caption and add some text, I can add code easier

With border, remove hover code I sent + add this code.

Change 20px for space between image - black border

section[data-section-id="66e9ea69d23c463c98a03892"] {
.gallery-grid-item {
    display: block;
    border: 1px solid black; 
    box-sizing: border-box;
    padding: 20px;
}
.gallery-grid-wrapper {
    grid-gap: 0px !important;
}
.gallery-grid-item:nth-child(2) {
    border-left: none !important;
    border-right: none !important;
}}

then I will check and send new code for hover

With arrow, I will check it when solve title first

18 minutes ago, tuanphan said:

With title, you can enable Gallery Caption and add some text, I can add code easier

With border, remove hover code I sent + add this code.

Change 20px for space between image - black border

section[data-section-id="66e9ea69d23c463c98a03892"] {
.gallery-grid-item {
    display: block;
    border: 1px solid black; 
    box-sizing: border-box;
    padding: 20px;
}
.gallery-grid-wrapper {
    grid-gap: 0px !important;
}
.gallery-grid-item:nth-child(2) {
    border-left: none !important;
    border-right: none !important;
}}

then I will check and send new code for hover

With arrow, I will check it when solve title first

I removed the old code and used the new one. Now there are black frames/borders 🙂

And I also enabled the Gallery captions and added some text.

Shall I do anything else? 🙂

@tuanphan