Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 11, 2021 at 4:09 pm #1305294
    MikeTandySwag

    Hi,

    I want to increase the size of the 1/3 Columns when you hover over them.

    However, I only want this to happen for specific columns.

    I’m currently using this code to make them increase in size.

    .flex_column.av_one_third:hover {
    animation: grow 1s;
    animation-fill-mode: forwards;
    position: relative;
    z-index: 50;

    }
    @keyframes grow {
    to {
    transform: scale(1.08)
    }
    }

    I tried adding a custom tag to the columns that I want it to happen to and then adding that tag to the CSS, but it’s not working.

    How can I make the hover action only happen on specific columns?

    Thanks!

    June 14, 2021 at 5:52 am #1305506
    Rikard

    Hey MikeTandySwag,

    I can’t see a custom class added to the columns, but you can target them specifically using CSS like this instead:

    .home #av_section_2 .flex_column.av_one_third:hover {
  animation: grow 1s;
  animation-fill-mode: forwards;
  position: relative;
  z-index: 50;
}

    Best regards,
    Rikard

    June 14, 2021 at 6:31 pm #1305660
    MikeTandySwag

    Hey so I tried that and nothing. I also added the custom css class to the columns and nothing

    June 15, 2021 at 3:57 pm #1305834
    Yigit

    Hi,

    Please edit your column element and give it custom ID (“hover-col” in example below) in Advanced > Developer Settings and then add following code to bottom of Quick CSS field in Enfold theme options > General Styling

    #hover-col {
    transition: all ease 0.7s;
}
#hover-col:hover {
    transform: scale(1.1);
}

    Best regards,
    Yigit

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