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.

Featured image hover effect on Grid (featured img like background)

  • Hello!
    I want to add CSS transition & transform when hover for featured images on posts grids, I cannot do it on block settings because on this block, featured images setting like background images of box.
    Please give me solution & an example.
    Thanks!
    gpb

  • Hi there,

    Could you please provide the link to your site with the section you want to apply this effect to?

    That can be done with some CSS.

  • I use this demo:
    https://gpsites.co/newsroom/
    Thanks!

  • Yes, I am aware that you used the Newsroom template, but I need to see your actual site in order to inspect the selectors that need to be used when writing the CSS for the effect.

  • Hello!
    I just import demo, my site is the same with it.
    But this problem come with all demos of GeneratePress use Query Loop block and setting featured image of post (Dynamic Data) like background image, example:
    https://gpsites.co/chef/
    and grid section on: https://gpsites.co/info/

    I need solution to set CSS transition & transform effect for featured image when we hover on the post box.

  • Hello!
    Just let you know I still waiting for solution. Thanks!

  • I need solution to set CSS transition & transform effect for featured image when we hover on the post box.

    Add transition and transform effects is our GB Pro plugin’s feature.
    https://docs.generateblocks.com/article/effects-overview/

    If you do not have GB Pro, try this CSS:

    
    .gb-query-loop-wrapper > .gb-query-loop-item > .gb-container {
        transition: all 0.3s ease;
    }
    
    .gb-query-loop-wrapper > .gb-query-loop-item > .gb-container:hover:before {
        transform: scale(1.2);
    }
  • Thanks Ying!
    I find a good solution from your example.
    Best Regards!

  • You are welcome   🙂

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