Jump to content

Custom grid with hover effects

Recommended Posts

Posted (edited)

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

homepage menu 3.jpg

Edited by aestetik_studio
Link to comment
  • Replies 9
  • Views 710
  • Created
  • Last Reply

Top Posters In This Topic

Posted (edited)

@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?)

Almost correct layout.png

Weird layout after opening website/page:
Weird looking layout.png

Edited by aestetik_studio
Link to comment

@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!

Scherm­afbeelding 2024-06-02 om 12.43.49.png

Link to comment

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?

Scherm­afbeelding 2024-06-05 om 21.37.05.png

Link to comment
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?

Scherm­afbeelding 2024-06-05 om 21.37.05.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.