Image Scrolls on Hover

Steven Orlosky

• March 17, 2023 00:51

Good day!

I would like to ask if how is this effect achieved (Pls refer in this link:
https://www.berrycast.com/conversations/aade2ddc-a31b-582c-b90a-0400d59305f4).

We would love to implement that for our site. Thank you so much!

0

• 

  Ariel H.

  • March 17, 2023 10:15

  Hi Steven,

  Thank you for reaching out to us.

  I assume that you're referring to the image effect on hover.
  You can accomplish this following the steps in this screencast - https://youtu.be/HH9lmFWlI2c

  I hope this helps.

  Best regards,
  Ariel H.

  0
• 

  Steven Orlosky

  • March 18, 2023 04:25

  Hello Ariel,

  Great! That's exactly what I mean. However, is there any way to adjust the scrolling speed?

  Thanks!

  0
• 

  Ariel H.

  • March 20, 2023 14:21
  • Edited

  Hi Steven,

  Thank you for keeping in touch.

  There's no built-in feature to add a delay; however, you may use this custom CSS.

  .brz-bg-image {
      -webkit-transition: ease-in-out 3s !important;
      transition: ease-in-out 3s !important;
  }

  I have tested this on a live CSS editor as demonstrated on this screencast - https://youtu.be/bv6jwddj03o

  You may change the ease-in-out values as needed.

  It is important to note that every website is unique, and the CSS may require some modifications. If necessary, please review the code and make any necessary adjustments to fit your website.

  Best regards,
  Ariel H.

  0
• 

  Steven Orlosky

  • March 21, 2023 05:19
  • Edited

  Hello Ariel,

  Great, it perfectly worked! Thank you so much for your assistance! 

  0
• 

  Steven Orlosky

  • March 21, 2023 13:18

  Hello Ariel, 

  By the way, we lately realized that putting the CSS affects all other brizy backgrounds of that particular page. Is there a way to have it affect only for some elements. A non-generic one? Thank you so much!

  0
• 

  Ariel H.

  • March 21, 2023 14:15

  Hi Steven,

  Thank you for keeping in touch.

  You can add a CSS selector, so it would only apply to this column on this block, as shown in this screenshot:
  https://prnt.sc/gMHRaOkvtlK-

  The CSS rule would be:

  .webpreview .brz-bg-image {
      -webkit-transition: ease-in-out 4s !important;
      transition: ease-in-out 4s !important;
  }

  Please try this and let me know if it works for you.

  Best regards,
  Ariel H.

  0
• 

  Steven Orlosky

  • March 22, 2023 03:08

  Hi Ariel,

  Thank you so much for your help. It worked just as we perceived it. 

  Have a nice day!

  0

Please sign in to leave a comment.