INDEX PAGE - Image change on hover

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

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

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?
 

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

Not an easy fix bangank36?

13 minutes ago, cmckee86 said:

Not an easy fix bangank36?

Yes, I'll let you know

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>

This is incredible bangank36! 

Will try and let you know how I get on.

Thank you so much!