How do you add hover effects to Squarespace images?

Рет қаралды 7,069

Күн бұрын

Пікірлер: 13

@AftonLin 3 ай бұрын

Thank you so much for this tutorial! I've been trying to figure out how to do this all day and your tutorial is the simplest and most efficient way I've found for someone who knows 0 things about coding :D

@Michelle.The.Creator 3 ай бұрын

Yay! So happy it was helpful!

@sheafilms Ай бұрын

Thank you! I was trying to figure this out for a while and yours was the easiest tutorial to follow.

@marie-luisewache6717 18 күн бұрын

Thank you so much for this. Helped a lot!!

@Michelle.The.Creator 18 күн бұрын

Glad it helped!

@tiemji 2 ай бұрын

Thanks for the tutorial

@nats763 3 ай бұрын

Hi! Thank you for the tutorial. It works for me, but onyle on the edit page. Once I go to the actual page the blocks appear completely solid and the image doesn’t show.

@Michelle.The.Creator 3 ай бұрын

Is there any chance that your site is live? I’d love to be able to pop over and check out the code to see what’s actually going on.

@jabroniking71 Ай бұрын

Hi Michelle! Thank you so much for this video! I wanted to ask you, How can I make the corresponding navigation bar text highlight when I hover over an image that is also a link? For example, how can I make the "Home" text in the navigation bar highlight when I hover over an image that links to the homepage?

@Michelle.The.Creator Ай бұрын

This was tricky! But I think I figured it out. I used the following CSS: body:has(#block-5377a18839f3e511aa0a:hover) nav.header-nav-list>div:nth-child(1) { background: blue; } In this case #block-5377a18839f3e511aa0a was the ID of the image. Then you need to replace the number in the parenthesis (currently 1) for the item in the list. First nav item=1, second nav item=2...and so on. You can use the Squarespace ID finder extension to get the correct image block ID. Let me know if that is what you were looking for. Oh and obviously replace the "background: blue" with whatever styling you want.