How to make a list section clickable - without button!

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?

Funny enough - I was asking around the same question right now! I am bumping into this issue as well..

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;}
}

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;
}

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

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