Background image, rollover and clickable?

Inkdave · March 25

Hi All

I have 3 sections on my homepage that use background images.

Is it possible using CSS to make these clickable links? So they can link to my product category pages.

Currently they link to product category pages via simple text links, which is a little clunky…

Also if clickable background image is possible can you also add a hover state, such as an image overlay?

url : Inkcandy.co.uk

many thanks in advance.

Inkdave · March 25

I have seen that this is possible, but appreciate it’s perhaps not straight forward.

And help would be much appreciated

thanks

tuanphan · March 27

First, edit 3 sections > Add a Code Block > Paste this code. Change /who-we-are to link what you want.

<a href="/who-we-are" class="section-clickable"></a>

Here is just an example

Next, use this code to Website > Website Tools > Custom CSS

/* section clickable */
a.section-clickable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.code-block {
	position: static !important;
}

Inkdave · March 27

I had all but given up on this and then you come along and provide the perfect solution. Thank you so much for your help!

Background image, rollover and clickable?

Recommended Posts

Inkdave

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Inkdave

Posted Images

Inkdave

Link to comment

tuanphan

Link to comment

Inkdave

Link to comment

Create an account or sign in to comment

News

Inkdave

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources