Jump to content

Clickable List images and hover effects

Go to solution Solved by jpeter,

Recommended Posts

In the post Make list images clickable Squarespace 7.1, @tuanphan provided a great solution for making the whole card area clickable. 

Prior to using this solution however, I had a hover animation effect on the list images. Since this solution expands the button to transparently cover the entire card area, hovering over the image no longer works to trigger the animation. 

My question is if there is a way to still have individual elements (e.g., the image, title, description) responsive to hover after making the whole card clickable? 

incidentally, the animation I'm using is

.list-item[data-is-card-enabled="true"] img:hover{ 
  transform: scale(1.2);
  transition: .4s;
  overflow: hidden;  
}

which causes the image to expand slightly when you hover over it.

Currently, I have set the image z-index high so the animation works, but that means the card is clickable, but not over the image.

THANKS

The site has not been made public and is password protected-  see2theSea@dawn

 

 

 

Link to comment
  • Replies 5
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

I think the setup that you have now is probably about the best solution. The click through is not the same element that is animated so you have to put one ahead of the other. You may be able to trigger the image animation based on the button hover state. Something along these lines:

button:hover {
   img {
       transform:scale(1.2);
   }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

@LPearlstine

Here's also a JS solution

JS

(function () {
  // Get list items on the page.
  const listItems = document.querySelectorAll('.user-items-list-item-container > .list-item');

  // Loop through each list item and attach a `click` event to it.
  listItems.forEach(function (listItem) {

    // Get the link contained in the list item.
    const link = listItem.querySelector('a.list-item-content__button');

    // If a link exists, attach a 'click' event to the list item that will
    // click the link whenever a user clicks the list item.
    if (link) {
      listItem.addEventListener('click', evt => {
        evt.currentTarget.querySelector('a.list-item-content__button').click();
      });
    }
  });
})()

Make sure you add this between <script> tags, e.g.

<script>
  // Add JS here
</script>

 

Here's a working example of the JS running via Chrome's dev console:

Edited by jpeter

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

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.