brizy wp

Edgar Herrera

• January 29, 2023 15:36

hello, it there any way to do a fancy box in brizy. for example if i have a image and when the user scrolls over it would zoom in a little and change overlay color and choose text an button to come up on it. 

0

• 

  Denis B.

  • January 30, 2023 09:37

  Hi Edgar,

  Denis here. Thank you for your message.

  Could you, please, provide us an example for better understanding?

  Best regards,
  Denis.

  0
• 

  Edgar Herrera

  • January 30, 2023 14:09

  scroll over examples here:

  https://montanaroofingsolutions.com/

  section that says "Quality Kalispell Roofing Services"

  or 

  https://ohioprecisionroofing.com/

  section that says "Full Service Residential & Commercial Roofing" 

   

  thanks

  0
• 

  KC George

  • January 31, 2023 10:48
  • Edited

  Hi Edgar,

  To implement the zoom effect on hover, as in the "Full Service Residential & Commercial Roofing" section of https://ohioprecisionroofing.com/ you can follow this approach. Let's say you have two columns and have added a background image to each column in your design. 

  

  1. Click on the top right corner of each column
  2. Select the 'Gear' icon
  3. Click on 'Styling'
  4. In the side panel that opens up, select 'Advanced' tab
  5. Paste the following code in the Custom CSS section.

  element:hover {
   transition: all .2s ease-in-out;
      transform: scale(1.05, 1.05);
      cursor: pointer;
      z-index: 1;
  }

  Please have a look at this screenshot https://jmp.sh/FPvSb7JM You can see the zoom effect on hover on this test page https://digital-works.brizy.site/image 

  0

Please sign in to leave a comment.