How to add clickthrough URL to custom CSS image

I've got image blocks that are set to clickthrough to another page. I wanted those images to have a hover over effect and I have found the code for that but it only works when you add a custom css block to the page. So I get the image to show up but so far can't find a way to link a URL to it. Is there anyway to link a clickthrough URL to a custom css code? Below is the code i'm using 

<img src="https://static1.squarespace.com/static/53407622e4b0f0bdc6e387dc/t/5dcf181f66e4061a93334439/1573853226998/WinterWandering.jpg" 

onmouseover="this.src='https://static1.squarespace.com/static/53407622e4b0f0bdc6e387dc/t/5dcf18cc3563fc67fd558d75/1573853393669/WinterWanderingv2.jpg'" 

onmouseout="this.src='https://static1.squarespace.com/static/53407622e4b0f0bdc6e387dc/t/5dcf181f66e4061a93334439/1573853226998/WinterWandering.jpg’">

The link to the page i'm trying to do it is here www.wraysinclair.com/film - the top one is how I want the clickthrough to work, and the bottom image is how I want the hover effect to work.

Does anyone know any code that I could add a clickthrough URL to my custom css block? Specifically the url I want to link to is www.wraysinclair.com/winter-wandering

I second this question!!!! I just came across the same situation where I made my image change on hover to another image but I have to use a code block with the CSS and I can't figure out how to add a click through to that image to direct somewhere else on page.

Great questions! I'll be awaiting the answer too lol

You can use Image Block to create effect, thus you will have clickthrough link.

Demo with Image Blocks + CSS. https://cylinder-mackerel-pnk5.squarespace.com/image-hover?password=abc

Pass: abc

@tuanphan but how do you do this effect but with a clickthrough?

3 hours ago, Nondys said:

@tuanphan but how do you do this effect but with a clickthrough?

Add Image Blocks & use this code

/* hide image on hover */
div#block-yui_3_17_2_1_1577707091631_4850 a:hover img {
    opacity: 0;

}
div#block-yui_3_17_2_1_1577707091631_4850 a img {
    transition: all ease-in-out 0.9s;
    opacity: 1;
  }
  /* Set new image */
  div#block-yui_3_17_2_1_1577707091631_4850 a {
    background-image: url(https://cylinder-mackerel-pnk5.squarespace.com/s/img1.jpg);
    background-size: cover;
    display: block;
}

@tuanphan Thank you so much!!!!

If you did want to stick with doing it via code, here's how. I found the image block way had some issues with the transparency, so this is an alternative (you just wrap the URL ref around the image; that way it applies whether you're hovering or not):

<a href="URL FOR CLICKTHROUGH">
<img src="BACKGROUND IMAGE UPLOAD LINK" 
	onmouseover="BACKGROUND IMAGE UPLOAD LINK'" 
	onmouseout="HOVER IMAGE UPLOAD LINK'">
  </a>

Are we able to use code to have the clickthrough link active only on the hover image and not the first image?

My hover image includes a designed button. It works fine for desktop, but on mobile, it skips the hover image as it appears only for a fraction of a second before going straight to the destination URL on first touch so I'd like to make the clickthrough link active on the hover image only instead of both. Thanks

23 hours ago, JohnnySimon7 said:

Are we able to use code to have the clickthrough link active only on the hover image and not the first image?

My hover image includes a designed button. It works fine for desktop, but on mobile, it skips the hover image as it appears only for a fraction of a second before going straight to the destination URL on first touch so I'd like to make the clickthrough link active on the hover image only instead of both. Thanks

 

 

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

Hello,

I have 7.0 sqs and i would like have mi cover  page (landing) linked with a click to a page.

my site: www.delmialvarez.com

Any help is appreciate

<best delmi

On 6/22/2022 at 4:34 PM, delmi said:

Hello,

I have 7.0 sqs and i would like have mi cover  page (landing) linked with a click to a page.

my site: www.delmialvarez.com

 

Any help is appreciate

<best delmi

 

 

 

You mean clicking any on page >> redirect to new page?

just clicking in the cover page (landing) and linked to a page in the site. I want to hide the button ACTION, but if remove or hide that button there is no more ways to enter in the pages.

Thank u. Appreciate your help.

On 6/23/2022 at 9:07 PM, delmi said:

just clicking in the cover page (landing) and linked to a page in the site. I want to hide the button ACTION, but if remove or hide that button there is no more ways to enter in the pages.

Thank u. Appreciate your help.

I remember I answered this 1-2 days ago on another post. Can you check it again??

Yes, but the code is for injection and not CSS. I replied that my account is a basic plan.

Thanks

11 hours ago, delmi said:

Yes, but the code is for injection and not CSS. I replied that my account is a basic plan.

Thanks

 

You are using Cover Page, with Cover Page the only way to add code is add to Header, it require Business Plan or higher.

The approach here is use standard page, add logo (with image block), button, background image. Then we will give the code to remove header/footer + make whole page clickable with Basic Plan

Thank you s¡so much for your help.

I wrote you a message about asking how to change the transition in slideshow, from fade to scroll. in WELLS template. I didn´t find how to do that..

www.delmialvarez.com

On 6/26/2022 at 5:58 PM, delmi said:

Thank you s¡so much for your help.

I wrote you a message about asking how to change the transition in slideshow, from fade to scroll. in WELLS template. I didn´t find how to do that..

www.delmialvarez.com

Hi, I don't know this. You try posting on a new topic.