Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 11, 2023 at 2:35 pm #1422141
    jb84

    Hi best team!

    I need to create a style like this (link in private): ; the 2 big pictures (woman and the group of persons) on full screen with roll over zoom in.

    Is enfold can do it?
    Regards

    October 12, 2023 at 5:17 am #1422182
    Nikko

    Hi jb84,

    This feature is not available on Enfold but the layout is similar to the hero section of our Enfold Parallax page: https://kriesi.at/themes/enfold-parallax/
    I think the you can start by creating a Grid Row with 2 images in in each column then have some Text Block (for the links) which should be hidden when the column is not hovered.
    You’ll need to use transform: translate to scale up the size of the image when hovered and a little bit of transition.
    I hope it helps you to the right direction.

    Best regards,
    Nikko

    October 12, 2023 at 3:30 pm #1422243
    jb84

    Thk Nikko!
    I tested grid, with background image on column > but if background image, impossible to maje them grow on over
    So i tested as you tell with a grid and image on each.
    It’s on the good way but im faced to 2 problems:

    1- As you can see on private link (the page i’m working on) depending of the size browser window high and width the 3 pictures do not cover 100% page most on the down.

    2- The other problem (surely because i set in TRANSFORM effect image 2/2/1) the 3 pictures go under content down, depending another time browser size… so what can solve it it’s not Transforming image size but i did it because it can cover 100% even with gril set to 100%.

    So… i don’t know if i can finish in this way.
    What will be perfect also can be SLIDER ACCORDEON but i can’t display it full sceen high and width.

    Can u help, regards

    • This reply was modified 1 year, 1 month ago by jb84.
    October 13, 2023 at 7:29 am #1422343
    Nikko

    Hi jb84,

    I think the first solution might get more complicated.
    Try to use slider solution as you have mentioned and then try to add this CSS code to make it cover 100% of the height:

    #accordion_slider_1 .avia-accordion {
    min-height: 100vh;
}

    Let us know if this helps.

    Best regards,
    Nikko

    October 13, 2023 at 9:39 am #1422352
    Guenni007

    as a participant I can’t see your links listed in the private window; I would also try with background images, but inherit them into a pseudo container, and then execute the hover styles with it. This has the advantage that the foreground content is not affected.
    With parallax backgrounds I think you have an extra container anyway.

    by the way – the pseudo container is a good solution to hamper the behavior on safari browsers with attachment fixed.

    see here: https://webers-testseite.de/jb84/

    • This reply was modified 1 year, 1 month ago by Guenni007.
    October 13, 2023 at 11:01 am #1422378
    Guenni007

    Another approach could be the way to animate the grid box itself:
    (real grid layout)

    https://css-tricks.com/animating-css-grid-how-to-examples/

    October 16, 2023 at 9:52 am #1422628
    jb84

    Hi thanks to provide this code to full screen accordeon.
    We can can forget this solution it’s not a full size high.it’s more than brwoser page high… see private link

    • This reply was modified 1 year, 1 month ago by jb84.
    October 18, 2023 at 7:48 am #1422850
    Nikko

    Hi jb84,

    How about adding a maximum height so it does not go over the browser height?

    #accordion_slider_1 .avia-accordion {
    min-height: 100vh;
    max-height: 100vh;
}

    Best regards,
    Nikko

    October 18, 2023 at 9:29 am #1422873
    jb84

    Thanks Nikko
    Size height is perfect BUT (link in private) you see if you resize height brouwser window the images stretch only height… :(
    ins’t it a solution to make them homothecia stresch?

    October 20, 2023 at 3:57 am #1423073
    Nikko

    Hi jb84,

    Can you try adding this CSS code as well and see if it helps with fixing the width of the image.

    #top .aviaccordion-slide img {
    width: auto;
}

    Best regards,
    Nikko

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