Jump to content

Image hover effects with links

Recommended Posts

7 minutes ago, Blackbearsfire said:

Hello!

I'm looking to create an opacity hover effect on images that will include a clickthrough link.

I'm not sure if this can be achieved in a grid, gallery, list or just individual images.

I want the opacity of the images to fade when hovered over and be able to be linked to other pages when clicked.

Thanks!

Can you share your site Url and protected password (if you have) so I can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

You can add a hover effect to any block in CSS, and set an opacity. You would just need the block ID if you wanted to target one individual block, or a class if you want to target all image blocks on a page or more.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

This will make images have an opacity of 60% and 90% when hovered on.

Place in Custom CSS under the Design dashboard option.

.sqs-block-image img {
  opacity:0.6
  transition:ease-in-out 300ms;
  &:hover {
    opacity:0.9;
  }
}

You can replace .sqs-block-image img with anything you want, block IDs list sections, gallery images etc.

Edited by Ziggy

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

It is probably worth saying that CSS can have impacts across your website, and you should be careful to understand what you're adding before doing it, or employ someone who does know to avoid a potentially broken website.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
23 minutes ago, Ziggy said:

This will make images have an opacity of 60% and 90% when hovered on.

Place in Custom CSS under the Design dashboard option.

.sqs-block-image img {
  opacity:0.6
  transition:ease-in-out 300ms;
  &:hover {
    opacity:0.9;
  }
}

You can replace .sqs-block-image img with anything you want, block IDs list sections, gallery images etc.

Placing this as is gives me a Syntax Error on line 2. Am I missing something?

Link to comment

Nope, that was me missing something:

.sqs-block-image img {
  opacity:0.6;
  transition:ease-in-out 300ms;
  &:hover {
    opacity:0.9;
  }
}

I deleted a semicolon, just to demonstrate how easy it is to have mistakes in code.....or maybe just by accident!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • 2 weeks later...
On 10/21/2022 at 9:18 AM, Ziggy said:

Nope, that was me missing something:

.sqs-block-image img {
  opacity:0.6;
  transition:ease-in-out 300ms;
  &:hover {
    opacity:0.9;
  }
}

I deleted a semicolon, just to demonstrate how easy it is to have mistakes in code.....or maybe just by accident!

Is there a list of class IDs to target different types of images?

Link to comment
7 hours ago, Blackbearsfire said:

Is there a list of class IDs to target different types of images?

You can find guides like this that can be helpful:

https://insidethesquare.co/css

Different image types have different classes, and every individual block has it's own ID which you can find either by inspecting the code or using a Chrome extension. 
https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • 1 month later...
On 10/21/2022 at 9:18 AM, Ziggy said:

Nope, that was me missing something:

.sqs-block-image img {
  opacity:0.6;
  transition:ease-in-out 300ms;
  &:hover {
    opacity:0.9;
  }
}

I deleted a semicolon, just to demonstrate how easy it is to have mistakes in code.....or maybe just by accident!

Last time I tried this code it worked but today I'm not having any luck.

Any ideas? @Ziggy

Edited by Blackbearsfire
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.