Add hover over non-product images - Ride Theme

Store Design
1

Is it possible to adjust multicolumn images which don’t feature products to have a hover/scroll over effect that shows a secondary image (in the same way products do)

Thanks

2

Hey @HomeSickTreats

Yes, it is possible to add a hover or scroll over effect to multicolumn images that don’t feature products. You can achieve this effect using CSS and JavaScript. Here’s a general approach:

  • HTML structure: Set up your HTML structure with the multicolumn images. Each image should be wrapped in a container element (e.g., a
    or ).
  • CSS: Apply CSS styles to the image container and secondary image to control their appearance and positioning. Initially, hide the secondary image using display: none; or opacity: 0;
.image-container {
  position: relative;
}

.secondary-image {
  position: absolute;
  top: 0;
  left: 0;
  display: none; /* or opacity: 0; */
}
  • Javascript: Add JavaScript code to handle the hover or scroll over effect. You can use event listeners (mouseenter and mouseleave for hover, or scroll for scroll over) to trigger the display of the secondary image.
const imageContainers = document.querySelectorAll('.image-container');

imageContainers.forEach((container) => {
  const secondaryImage = container.querySelector('.secondary-image');

  container.addEventListener('mouseenter', () => {
    secondaryImage.style.display = 'block'; // or secondaryImage.style.opacity = 1;
  });

  container.addEventListener('mouseleave', () => {
    secondaryImage.style.display = 'none'; // or secondaryImage.style.opacity = 0;
  });
});
  • Customize and enhance: You can further customize the hover/scroll over effect by applying transitions, animations, or other CSS properties to create a smooth and visually appealing transition between the primary and secondary images.

Remember to adjust the class names and modify the CSS and JavaScript code to fit your specific HTML structure and styling preferences. Additionally, you may need to consider responsiveness and adapt the code accordingly for different screen sizes or devices.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi there,

Firstly thank you so much for taking the time to post all of this! I really appreciate it.

For JS/CSS and HTML text would I need to post this via a custom liquid section or within the code of the store. I seem to find most of the store assets are in liquid and I’m not sure where I would input this JS/HTML/CSS script