[Resolved] zoom section background image

Home Forums Support zoom section background image

  • This topic has 3 replies, 2 voices, and was last updated 4 months ago by Elvin.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1457533
    drew

    I thought this would be relatively straightforward but I may be missing something. I’m trying to get a zoom effect on hover for just the background image inside a section.

    I can’t seem to find where to apply the CSS to just the image, rather, it can only be applied to the entire section.

    What am I missing?

    #1457599
    Elvin
    Customer Support

    Hi Drew,

    It seems like you’re applying the css transition on the container.

    You can try this out instead.

    .generate-sections-container {
      -moz-transition: all .5s;
      -webkit-transition: all .8s;
      transition: all .8s;
      background-position: center center;
      background-size: 100%;
    }
    
    .generate-sections-container:hover {
      -webkit-background-size: 120%;
      -moz-background-size: 120%;
      -o-background-size: 120%;
      background-size: 120%;
    }

    This will apply to the backgrounds of all sections. If you want it to apply on a specific section only, just add its ID selector before .generate-sections-container class selector.

    Let us know if it works for you.

    A wise man once said:
    "Have you cleared your cache?"

    #1457610
    drew

    There we go, thank you so much!

    #1457614
    Elvin
    Customer Support

    No problem. We’re always glad to be of any help.

    Cheers.:)

    A wise man once said:
    "Have you cleared your cache?"

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.