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?

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?

Hi, this worked on my website, but the hover effect only shows when I am on editing mode. When I click preview, the image that is supposed to be hidden unless it's been hovered over is showing as static. am i doing something incorrectly?

On 11/13/2023 at 7:05 AM, sophdooley said:

Hi, this worked on my website, but the hover effect only shows when I am on editing mode. When I click preview, the image that is supposed to be hidden unless it's been hovered over is showing as static. am i doing something incorrectly?

Can you share link to page where you have problem? We can check easier

Hi, I managed to fix the hovering problem. It turns out that I needed to turn off "Animations" so that it works. But now it seems like I cannot add a hyperlink to the textbox. I wanted the user to hover over it and make it clickable to take them to a particular gallery.

Here is the website link: 70-50design.ca/ongoing-projects

The password: 1234

Thank you!

On 11/19/2023 at 1:06 AM, sophdooley said:

Hi, I managed to fix the hovering problem. It turns out that I needed to turn off "Animations" so that it works. But now it seems like I cannot add a hyperlink to the textbox. I wanted the user to hover over it and make it clickable to take them to a particular gallery.

Here is the website link: 70-50design.ca/ongoing-projects

The password: 1234

 

Thank you!

Try adding to Custom CSS box

@media screen and (min-width: 768px) {
#block-yui_3_17_2_1_1697400011904_19353 *,
#block-0621c99dd9acef85aed1 *,
#block-4b94192b9870dd1aa56e * {
    height: 100%;
}

#block-yui_3_17_2_1_1697400011904_19353 a,
#block-0621c99dd9acef85aed1 a,
#block-4b94192b9870dd1aa56e a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background-image: unset 
}
.fe-652c5bc10b2e0d39da9686d4 span.sqsrte-text-color--custom {
    display: inline-block;
    height: fit-content !important;
}}

Hello, I'm trying to accomplish the same thing - I have a strip gallery block on my home page, called PROJECTS, and each image is specifically meant to be a click through link, and I'd like an opacity change on hover to indicate the click through capability. None of the code on this site has worked, nor has turning off animations or lightbox, etc. 

My website is still in trial, it is https://cobalt-mustard-hn3a.squarespace.com

On 3/27/2024 at 9:22 PM, ArcherDougherty said:

Hello, I'm trying to accomplish the same thing - I have a strip gallery block on my home page, called PROJECTS, and each image is specifically meant to be a click through link, and I'd like an opacity change on hover to indicate the click through capability. None of the code on this site has worked, nor has turning off animations or lightbox, etc. 

My website is still in trial, it is https://cobalt-mustard-hn3a.squarespace.com

You can follow this guide to share url

Hello, thank you. Password is: archer2024 for the site 

https://cobalt-mustard-hn3a.squarespace.com

I want to make sure the effect only applies to images that are links. None of the other images in galleries should have the effect 🙂 thank you!