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

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

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

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.

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.

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