Jump to content

INDEX PAGE - Image change on hover

Recommended Posts

Hi SS Team!

So, rather than the project name and an opacity change occur (when I roll over a specific project on my index page), I want the image to change to a completely different image. 

Please, please, please, please help me!

Kind regards.

Chris

Link to comment

Hi cmckee86,

So far squarespace did not allow to add multiple images on an item, I suggest we do some workaround like hide the odd() item and used it as the different image on image for the even() ones.

I can have solid solution once you give the site url

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 minutes ago, cmckee86 said:

Hey bangank36! 

That's teribly kind of you for getting back to me, this is the URL...

https://www.morganxmckee.com/

Do you think you can help?
 

Sure, hang on

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
13 minutes ago, cmckee86 said:

Not an easy fix bangank36?

Yes, I'll let you know

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 hours ago, cmckee86 said:

Not an easy fix bangank36?

This is my solution, you may want to add the snippet into Page Settings -> Advanced -> Custom Code. 

Here is some set up steps:
- Assume each image has it's opposite image next to it, so you may want to double the number of items per page, eg: 9 items will need to set up 18 items

- The opposite item should be a same link, which lead to same url with the item before it

- I did not test, but you may want to disable ajax for best use of this snippet

http://recordit.co/U4vTx5kWMB

<style>
	.index-section:not(.combined-section):nth-child(even) {
      display: none;
    }
    .index-section:hover .index-item-text-wrapper {
      display: none;
    }
    .index-section {
      position: relative;
    }
    .index-section:hover  article {
      position: relative;
    }
    .index-section:hover .index-item-image-wrapper {
      opacity: 1;
    }
    .index-section article:last-child {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      overflow: hidden;
    }
    .index-section article:last-child img {
      width: 100%;
      height: 100%;
    }
    .index-section:hover  article:last-child {
      z-index: 1;
    }
    .index-section:hover  article:first-child {
      z-index: -1;
    }
</style>
<script>
Y.on('domready', function () {
    Y.all(".index-section:nth-child(even)").each(function(el, i) { 
      Y.one(el).previous().addClass("combined-section"); Y.one(el).one("article").appendTo(Y.one(el).previous()); Y.one(el).remove(); 
    });
});
</script>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.