Pipeline hover effect - Removing hover delay

Store Design
1

Hi all,

Currently the Pipeline theme has a hover effect that takes a couple seconds to show up on the website.

Is it possible to make the picture hover as soon as your mouse touches the image?
I really want to remove the delay that the Pipeline theme has.

Any thoughts on how to approach this?

1 Like
2

@Specialquest123 can you share your store url?

3

To remove the delay and make the hover effect activate immediately when your mouse touches the image in the Pipeline theme, you’ll need to modify the theme’s CSS. Here’s a general approach to achieve this:

  1. Access the theme editor: Go to your Shopify admin dashboard and navigate to “Online Store” → “Themes”. Find the Pipeline theme and click on the “Actions” dropdown, then select “Edit code”.

  2. Locate the CSS file: In the theme editor, look for the CSS file that controls the hover effect. This could be a file named theme.scss.liquid, styles.scss.liquid, or similar. Open it in the code editor.

  3. Find the hover effect code: Within the CSS file, search for the code that defines the hover effect for the images. It might look something like this:

.image:hover {
  /* Hover effect styles */
  /* ... */
  /* Transition properties */
  /* ... */
}

    1. Remove the transition property: In the hover effect CSS code, there is likely a transition property specified that creates the delay. It could be something like transition: all 0.3s ease;. Remove this transition property to eliminate the delay.

    2. Save the changes: Once you have removed the transition property, save the CSS file.

    3. Preview and test: Preview your store and hover over the images to see if the hover effect now activates immediately upon touching the image, without any delay.

    By removing the transition property, the hover effect should be triggered instantly when your mouse touches the image, eliminating the delay. However, please note that the specific CSS code and file location may vary depending on your Pipeline theme version or customization. Make sure to search for the appropriate CSS code that controls the hover effect in your theme’s files.

4

@Ujjaval Yes!

Here’s the store URL
https://visignnature.myshopify.com/

Password: taochu

5

Thank you so much for your explanation.
Unfortunately I couldn’t find the transition property.

6

@NomtechSolution Thank you so much for your explanation.
Unfortunately I couldn’t find the transition property.

1 Like
7

Update on this subject:
I Pipeline added the possibility to change this within the theme.
Change the slideshow in the productcard (under theme settings) to 2 and 0,5 seconds and it wil directly show :wink: