Making background images scale when you hover over them

[bcoplin]

I was wondering if it was possible in X to make background images scale when you hover over them…

An example of what I am talking about can be found at… https://www.oribe.com

Thanks for looking into this.

[lely]

Hi There,

This is not available out of the box but possible with some custom CSS.

1.) Add section background. Add the background image on BACKGROUND LOWER LAYER.
2.) On Customize Tab : Add an ID so we can reference to this section, let say background-scale
See this implementation: https://screencast-o-matic.com/watch/cb6XjgIE6N

#background-scale:hover .x-bg-layer-lower-image {
    background-size: 130% !important;
  transform: scale(1.2);
}
#background-scale:hover .x-bg-layer-lower-image {
   transition: all .5s;
}

This might help you too: https://css-tricks.com/zooming-background-images/

[bcoplin]

Thank you for sending this! Works perfectly!

[Joao]

Glad to hear we managed to help!

[mrdplusd]

Hello, I am also trying to achieve this effect with the above-mentioned method. Unfortunately the picture jumps back as soon as the mouse is moved away. It seems the defined transition does not work here. Does anyone have any idea how a smooth transition can be realized in both directions in the same way?

The code I used:

#background-scale:hover .x-bg-layer-lower-image {
transform: scale(1.3);
transition: all .5s ease-in-out;
}

[tristup]

Hi @mrdplusd,

What you are trying to achieve is required a few customizations which is beyond the scope of theme support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.
You can also try the Effect Module which allows users to take advantage of the CSS properties to create some interactive animations. Please find the detailed documentation at the following link.

Effects Module | Themeco Docs

I would also suggest you check the following thread, which may help you on this too.

Scaling background images on hover without overflowing the column

Hey Joao, thank you so much for the effort. It works perfectly. I removed the text-area you added and the transparent background before the hover and at the end of the transition. If you want to take a look, the link i posted before is still working. You just made my day! In general: Your support is spectacular! All the best. Ingo

Hover image zoom in

HI There, Thanks for writing in! Making this type of background for column need custom CSS which is our theme support scope. I will try to help you with some code so that you can able to do this. Point 1. Please add a background image to the columns, with setting given below. [image] same repeat for all the there columns. Point 2. To make the columns equal height make the row as marginless. [image] point 3. add this code to each of your element CSS of the columns [image] $el{ cursor…

Please remember that the code given in the above reference thread 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 that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[mrdplusd]

Thank you very much, Tristup, for your short, concise and extremely helpful answer.

For everyone dealing with the same problem, here is the solution. The above code defines the transition for the hover interaction. If you move the cursor away from the background, the image jumps back to its original size without transition, because no transition effect has yet been defined for its state without hover.

Overall, the code should look like this in order to implement a forward-backward transition:

.background-scale .x-bg-layer-lower-image {
   transform: scale(1.0);
   transition: all .5s ease-in-out;
}
 
.background-scale:hover .x-bg-layer-lower-image {
   transform: scale(1.1);
   transition: all .5s ease-in-out;
}

[tristup]

Hi @mrdplusd,

Glad that you have shared the solutions with others.

Thanks