Clickable List images and hover effects

LPearlstine · January 4

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

LPearlstine · January 4

the site is https://www.conservenassau.org/wildlifecorridors#resources

Ziggy · January 4

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

LPearlstine · January 4

Thanks much Ziggy for your comments and suggestion. Unfortunately it didn't work. The overlain button container still wins.

jpeter · January 5

@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 January 5 by jpeter

LPearlstine · January 5

Nice. Thanks for working this out. I thought it might be javascript problem, but I wouldn't have known how to do it.

Clickable List images and hover effects

Recommended Posts

LPearlstine

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

LPearlstine

Link to comment

Ziggy

Link to comment

LPearlstine

Link to comment

jpeter

Link to comment

LPearlstine

Link to comment

Create an account or sign in to comment

News

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources