Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

How to add clickthrough URL to custom CSS image


WraySinclair

Question

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

 

Link to comment

16 answers to this question

Recommended Posts

  • 0

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

Link to comment
  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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>

 

Link to comment
  • 0

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

 

Edited by JohnnySimon7
Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

 

 

 

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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.

Link to comment
  • 0
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??

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...