Collection - Add a hover effect to product images on your collection pages

Store Design
28

Well thank you JunePratt!!

This worked like an absolute charm! Sorry for my late reply, with all that’s been going on I haven’t been around much lately…

While I’m at it, would you mind if I picked your brain about something? We’ve had a pretty skilled dev working on a shop a while back and he actually managed to set up the hover image by calling it up using the alt-tag of said image. For example, you could use “hover-image” on any desired image and that’s the image it’d switch to. Any ideas how that would work?

Also, I went ahead and changed the reveal module ever so slightly for a smoother fade in/out transition only. Ease-in-out seemed buggy somehow (image snaps back to previous instead of fading back out) so I went ahead and used transition all:

.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;  
}