Image hover effects with links

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!

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?

27 minutes ago, bangank36 said:

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

I was just playing around with templates in 7.1 to see if this could be accomplished, so I don't have the site yet.

I wanted to see if this could theoretically be achieved first.

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.

2 minutes ago, Ziggy said:

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.

Can you point me to a code snippet I could try in the custom CSS?

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.

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.

17 minutes ago, Ziggy said:

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.

Thank you, much appreciated!

Not a problem, good luck with any tweaks you make.

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?

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!

7 minutes ago, 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!

Ha ha awesome. Thanks!!

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?

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

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

How and where are you trying to use it?

I was trying to use it the same as before on an image block in 7.1

When you first posted the code I tried it and it worked. This time I tried it the image fades but nothing happens when I hover over it.

I also tried it in a Fluid Engine page but that didn't work.

Very odd, it simply works in my testing.

Have you placed this at the bottom of the Custom CSS? Might there be some conflicting code in the CSS?