Jump to content

How to make a list section clickable - without button!

Recommended Posts

So my client doesn't like the "Learn More" click-through link in the list section of their services (see below).

Instead they want to see a hover effect to demonstrate the boxes are clickable, likely a scaling effect. I'm currently investigating using nth:child with page syntax, but haven't gotten it so far. 

Thoughts?

 

Screen Shot 2021-12-28 at 12.49.34 PM.png

Link to comment

So, i ended up using code blocks instead of working with the list sections - way easier to get done IMO. Hopefully this helps you too! 

[data-section-id="INPUT YOURS"] {
  .code-block {
  background: #fff;
  transition: all .4s ease-in-out;
  margin: 15px;
  padding: 30px !important;
  height: 350px;
} 
.code-block:hover { box-shadow: 0 7px 12px rgba(0,0,0,0.25);
  transition: box-shadow 0.3s ease-in-out;}
}

 

Screen Shot 2021-12-29 at 2.47.42 PM.png

Link to comment

You can add a button in List section, then use this code to turn whole box clickable (&hide button)

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
9 hours ago, Beatusmoments said:

Hi Katie, 

How did you add the code blockers and where? I need extra help here - not the best with codes... please feel free to message me, thanks!!

Do similar Text, Image Block...when you add a block >> type: Code Block, you will see it in list

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.