Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

hover effect

  • afuente
    April 24, 2023 at 11:49 am

    hello,

    is there any way to create (with generateblocks) an image with an text over it and to change this text on hover. Perfectly appears a layer with new, something like here https://hotel-xenia.plethorathemes.com

    Thanks
    Angel

  • Ying
    April 24, 2023 at 1:39 pm

    Hi Angel,

    Do you mean this section?
    https://www.screencast.com/t/bWCrHVZ4

    If so, it will require some custom CSS.

    1. You can build the structure shown below:
    https://www.screencast.com/t/PXrr8Ara

    Settings for container a：
    – width: 33.3%
    – height: 100%
    – min-height: 500px (you can adjust the value)
    – display: flex
    – flex-direction: column
    – overflow-y: hidden

    Settings for container b：
    – min-height: 100%
    – z-index: 2
    – position: relative

    Settings for container c:
    – display: flex
    – flex-direction: column
    – justify-content: flex-end
    – min-height: 100%

    2. Add the container link to container b by clicking the link icon in the floating toolbar.
    https://docs.generateblocks.com/article/container-links/

    3. Add an additional CSS class to container c, eg. overlay, add an additional CSS class to container b, eg.base.
    https://wordpress.org/support/theme/generatepress/

    4. Add this CSS:

    .gb-container.base:hover + .gb-container.overlay {
    transform: translatey(-100%);
}

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    5. Add transition for container c at Effect > transition.
    https://www.screencast.com/t/MHs9wlW0lO

    Let me know if this helps!

  • afuente
    April 24, 2023 at 11:01 pm

    you are really a machine!! it works

    when I cross over the image, the layer with the text appears. but i have to let the mouse without moving, otherwise the layer “moves” (appears and disappears) and it is a little bit annoying. is there a way to avoid this?

    Thanks again

  • David
    April 25, 2023 at 2:12 am

    Hi there,

    try adding this CSS:

    .gb-container.overlay {
    pointer-events: none;
}
  • afuente
    April 27, 2023 at 8:36 am

    good afternoon,

    Everything works perfectly but I can’t get to put a link on the hover. Could you please have a look….?

    thanks in advance

  • afuente
    April 27, 2023 at 8:42 am

    Sorry, I haven’t told you correctly the problem. I can put the link in the hover into the blocks rooms, environment and paragliding but when I pass over the hover with the mouse and clik on it, the link doesn’t work and a new window doesn’t open.

  • Ying
    April 27, 2023 at 10:53 am

    The login doesn’t work, I can not see your site.

    Can you check?

  • afuente
    April 28, 2023 at 1:46 am

    Make a flushdns. The website was under a different ip since yesterday more or less….

  • David
    April 28, 2023 at 3:41 am

    OK, lets go back a couple of steps:

    1. Container B, remove the base class
    2. Container A, add the base class
    3. Change this CSS:

    .gb-container.base:hover + .gb-container.overlay {
    transform: translatey(-100%);
}

    to:

    
.gb-container.base:hover .gb-container.overlay {
    transform: translatey(-100%);
}

    4. remove this CSS:

    .gb-container.overlay {
    pointer-events: none;
}
  • afuente
    May 17, 2023 at 11:38 pm

    Thanks a lot. It works 😉

  • David
    May 18, 2023 at 2:33 am

    Glad to hear that

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