Add zoom out effect on image banner

[Dieseins22]

Can someone explain me how to add a zoom out effect of the image banner when entering my site like in this example : https://badeyez.de/

my URL : https://dieseins.de/

[oscprofessional]

@Dieseins22 

Hii,

.banner__media.media img {
	transition: transform .8s cubic-bezier(.215,.61,.355,1),opacity .8s cubic-bezier(.215,.61,.355,1);
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

[LitCommerce · Accepted solution]

Hi @Dieseins22,

Please follow the steps below:

- Step 1: Go to Assets > base.css and paste this at the bottom of the file:

.banner__media.media img {
  transform: scale(1.1);
  transition: transform .8s cubic-bezier(.215,.61,.355,1),opacity .8s cubic-bezier(.215,.61,.355,1);
  }

- Step 2: image-banner.liquid file and add code here:

Code:

<script>
  setTimeout(() => {
    document.getElementById('Banner-template--15550583406778__1655550052e8c75092').querySelector('img').style.transform = 'none';
  }, 100);
</script>

Hope it helps!

[Dieseins22]

Thank, you that worked !

[EdsonAdriano]

Hi, I tried this and followed your steps but it didn't do anything for me. Banner image didn't zoom in or anything. I use Dawn 11.0. Could you please help me?