Popup with image hover plugin

Pia Grace Torres

• September 05, 2023 21:29

Hi there!

I need help with this page: https://projects15.sg-host.com/our-team/?preview_id=161&preview_nonce=787ee29369&preview=true

I am using the "Image Hover" plugin so that the photos change when you hover over them. However, when I try to make the blocks open a pop-up, that plugin no longer functions properly.

If you take a look at the first image and click on it, that popup works, but the image hover does not. You can see how the hover image works for the other images.

Will you please help me with this?

0

• 

  KC George

  • September 06, 2023 08:51

  Hi Pia,

  Can you give us more details about how you created this page?

  • Did you add the images using the plugin's shortcode? If not how else did you add the images with hover effect to your Brizy page?
  • What steps have you followed to add a popup to the first image? Are you using Brizy for the popup or did you add popup in the plugin?

  0
• 

  Pia Grace Torres

  • September 07, 2023 03:30

  I used the images using the plugin's shortcode. This was the only way that the plugin would work to have the hover transition effect. 

  For the popup, I used the Brizy popup. 

  

  0
• 

  KC George

  • September 07, 2023 06:45

  Hi Pia,

  When you put an object (like image) within a container and link the container to a popup, the container will record the mouse movement rather than the object inside of it.  The image must be able to capture the movement of the mouse pointer in order to display the hover effect. In your design, the image within the column won't detect the mouse hover and hence it cannot display the hover effect.

  You can implement this only if the plugin allows you to add an on-click popup. 

  0
• 

  Pia Grace Torres

  • September 25, 2023 19:30

  Thank you for your response. I heard back from the plugin developer, and this was their response:

  "You can do this task with a popup ID. Like add #id as URL and integrate it with popup. Normally we create a popup and call popup id as url like #url as button link."

  Do you know how to do this within Brizy?

  0
• 

  KC George

  • September 26, 2023 05:57
  • Edited

  Hi Pia,

  Using a popup ID and adding #id as URL and integrating it with popup is unlikely to help in your scenario. Here is the reason. When you link a column to a popup, the entire area marked in yellow in the image below is linked to a popup. When clicking anywhere within the yellow area will trigger the popup. Hence the image of Sandy within the yellow area cannot capture the mouse movement to display hover effect because the mouse movement is already captured by the hyperlink applied to the column.  

  

   

  Let me use a real-world scenario to demonstrate this idea. Consider that you are shining your flash light on a picture of Sandy Marshall that is sitting on a table. The photograph will be illuminated by the flash. But if you put the photo inside a plastic container and try to focus the flash on it, the light will instead fall on the plastic container and not on the picture.

  Displaying hover effect and linking the entire column to a popup at the same time may not be possible. You may need to avoid linking the column to a popup if you want the images to display its hover effect.

  0

Please sign in to leave a comment.