Add hover over non-product images - Ride Theme

HomeSickTreats
Visitor
2 0 0

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

Replies 2 (2)
Moeed
Shopify Partner
2336 591 706

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 <div> or <figure>).
<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img class="secondary-image" src="secondary-image1.jpg" alt="Secondary Image 1">
</div>
  • 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&colon; 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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

- Expert in Shopify SEO optimization for higher search rankings.


- Your Coffee Tip , my code - a perfect blend! ❤️
HomeSickTreats
Visitor
2 0 0

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