Background scale to 1.05 on hover

Support
#1

Hi there,

I have a site here:

http://bigfish.ethermedia.hu/

Around the middle of the page, there’s this area: https://www.dropbox.com/s/gx99kn2r8339v42/Screenshot%202019-10-15%2017.49.10.png?dl=0

I’m wondering if there’s an easy way to do a scale background on hover. Like the one that all the other images use with EG on the site if you look around. If not, I’ll just remake it with that, but it would be cool to learn how to achieve this without the use of an extra plugin. Thanks!

#2

Hi @Pbalazs89,

Thank you for writing in, please add this to your Column’s Element CSS area

$el.x-column:hover .x-bg .x-bg-layer-lower-image {
	transform: scale(1.1);
	transition: transform 0.5s;
}

Feel free to adjust those values.

More details about CSS Transitions and CSS transform: scale()

Cheers!

#3

Works great! Thanks a bunch, I don’t know why I wasn’t able to grab the background.

I’m trying to replicate the same thing with the header, and for some reason it works in the header builder but does not work in real life. Only difference is I want it to happen on windows load and not hover.

What I’m doing:

https://youtu.be/FrIzLLG6Ayw

What I’m trying to achieve:

Thanks again!

#4

Hi @Pbalazs89,

That one is a bit tricky, you need to use the CSS Keyframe Animation for that.

Please see more details here.

Or you can also utilize the Revolution Slider’s Ken burns effect to achieve that.

https://www.themepunch.com/slider-revolution/pan-zoom/

Hope it helps,
Cheers!

#5

Hi there,

I found the right way to do it via CSS: https://codepen.io/hkfoster/pen/kechC

But the thing is, I’m unable to grab the background like I would do with in the content. What is the right CSS to grab the header background? Right now I’m using:

$el.x-bar .x-bg .x-bg-layer-lower-image {
  transition-delay:1s;
    z-index: -1;
 	 transform: translate3d(0,0,0) scale(1.25);
  
}

$el.x-bar .x-bg .x-bg-layer-lower-image .loaded  {
  transform: scale(1);
  transition: 6.5s transform;
}

And the following jQuery:

// Trigger class name on load
jQuery(function() {
jQuery(’.x-bg-layer-lower-image’).addClass(‘loaded’);
});

To my knowledge, this should work, but my knowledge is limited, any idea why it doesn’t? ;D

#6

Hi @Pbalazs89,

I updated your codes a bit.

Please update your element css to

$el.x-bar .x-bg .x-bg-layer-lower-image {
  transition-delay:1s;
  z-index: -1;
  transform: translate3d(0,0,0) scale(1.25);
  
}

$el.x-bar .x-bg .x-bg-layer-lower-image.loaded  {
  transform: scale(1);
  transition: 6.5s transform;
}

and also update the javascript to

jQuery(function() {
  jQuery( document ).ready(function() {
      jQuery('.x-bar .x-bg-layer-lower-image').addClass('loaded');
  });
});

Hope it works. Let us know how it goes.

#7

Hi again,

Tried the new code, unfortunately it does not work either. :frowning: Any other ideas?
Thanks for helping!

#8

Never mind it works, was probably a caching issue. Thanks for the help!!!

#9

You are most welcome!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.