Image parameters

[JohannLamour]

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/

[ruenel]

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:

• Effects Module | Themeco Docs

Best Regards.

[JohannLamour]

@JohannLamour

https://demo.theme.co/bed-and-breakfast/ (ligne explorer nos chambres > murphy exclusif)

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?

[tristup]

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.

Background Image Zoom In On Hover - Andreas Wik

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

[JohannLamour]

@tristup

https://awik.io/background-image-zoom-hover/

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.

[ruenel]

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.

[JohannLamour]

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 ?

[marc_a]

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.

[JohannLamour]

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

[JohannLamour]

here is the area concerned

[ruenel]

Hello Johann,

Please see the example Section on your page.

Thanks.

[JohannLamour]

thank you it’s perfect

[ruenel]

Don’t mention it.

[JohannLamour]

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/

[ruenel]

Hey Johann,

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

Hope this helps.

[JohannLamour]

Thanks for your feedback.
I notice that the entire image is displayed regardless of the size of the block.
Is this due to the image - container block? what have you configured to apply this constraint? (I’m asking you this question in order to understand what you did, to be more independent next time :)).

On the other hand, I still encounter the same visibility problem, on a screen with a width of 414px or less (smartphone see captures). In fact the block overlaps with the footer. How to remedy this problem?

[ruenel]

Hello Johann,

You just have to adjust the minimum height of the Column element.

Best Regards.

[JohannLamour]

thank you, that’s understood.

Last thing for this element, I want to be able to insert the option to click on it to take the site browser to another page of the site.
What option should I configure in this image block?

[ruenel]

Hello Johann,

In your Column element, you will have to change the HTML tag from <div> to <a> so that the Link Option will display in the element settings. Check out these screenshots:

1.)

2.)

Hope this helps.