Image parameters

Hello, I would like to be able to configure a hover over the image block (see screenshot in attachment

):
when you hover over it, the image zooms inside the block, and a filter is applied, as for the following demo : https://demo.theme.co/bed-and-breakfast/ (row explore our rooms > murphy exclusive)
Link to my site: https://lestableauxdemc.com/

Hello @JohannLamour,

Thanks for writing in! You can replicate that effect by having an element structure like this:

Section
   Row
      Column
         Image
         DIV

The DIV element will be the overlay over the image. You can add a transparent background color on the DIV element and then a semi-transparent color as an interaction background color.

As for the Image element, you can add an Interaction Scale effect so that when you hover the image, it will zoom in. If you are not familiar with the Effects module yet, please check this out:

Best Regards.

1 Like

Thank you for your precise feedback.
After setting up the interaction scale effect, I noticed that the zoom effect works but the image goes out of the column frame.
(see screenshot)


In the example https://demo.theme.co/bed-and-breakfast/ (explore our rooms line > murphy exclusive) the zoom is constrained to the limit of the column frame.
How to constrain the zoom to the frames like in your demo?

Hi Johann,

The image in the demo is set to the background and the zoom effect has been set using the custom CSS coding. If you want to replicate the same, you can check the following article.

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks

1 Like

Thanks for your feedback.
I have just read the article, it is very clear, however I would need 2 technical details:

  • Regarding the html tag, where is this parameterized on the interface?
  • As for the CSS, do we agree that it must be inserted in the customize tab of the column concerned?
    Thank you in advance for your feedback.

Hello Johann,

You can contain the image by controlling the overflow option of the Column by setting it to hide.

If you can give us your WP Access we can check your page set up.

Thanks.

1 Like

Hello, I sent you a message with my identifiers so that you can look at this aspect, I have also attached a capture.
Did you receive it ?

Hey Johann,

We highly suggest not to direct message our staff because we don’t usually read it. That being said, please add your credentials in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

thank you for your response, I will attach my identifiers to you by secure message.

here is the area concerned

Hello Johann,

Please see the example Section on your page.

Thanks.

1 Like

thank you it’s perfect

Don’t mention it.

1 Like

I’m having a problem displaying the block you customized for me. In fact, for screens with a width of 768px, the photo does not apply to the entire background of the column.
From a width of 411px and below, the block passes over the block below.
How can I readjust these items.

Links : https://lestableauxdemc.com/


Hey Johann,

I made some updates to the element structure. You can check out the screenshot below.

Hope this helps.