Hover transitions

  • Resolved Jaiji

    (@jaiji)


    1 year, 4 months ago

    Hi. I have a card-style filter grid set up and working nicely, on a local site at the moment so no URL, sorry. I’m trying to set up a hover transition so that the item title and excerpt ease into view but I can’t get it working. Is this possible with the free version using CSS only? If so could you please explain?

    Many thanks. Liking the plugin btw.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Brecht

    (@brechtvds)

    1 year, 4 months ago

    Hi there,

    When an item is being hovered, it looks for any containers inside of that item that have the wpupg-hover class, and then adds wpupg-hovering to that container. So in the grid template editor you could add a div like that to target.

    Kind regards,
    Brecht

    Thread Starter Jaiji

    (@jaiji)

    1 year, 4 months ago

    I have this in the template (based on Hover with Date):

    [wpupg-item-image default="500x999"]
    <div class="wpupg-hover">
        [wpupg-item-title]
    [wpupg-item-excerpt]
        
    </div>

    I’ve tried adding the transition (transition: all 0.3s ease) to both .wpupg-hover and .wpupg-hovering, one at a time, no joy, the title and excerpt still appear instantly on hover. Anything obvious I’m doing wrong?

    Plugin Author Brecht

    (@brechtvds)

    1 year, 4 months ago

    Could you try adding some CSS like this (you will need to adjust the template selector):

    .wpupg-template-test-hover .wpupg-hover {
      	opacity: 0;
      	transition: all 1s ease;
    }
    .wpupg-template-test-hover .wpupg-hover:hover {
      	opacity: 1;
    }
    Thread Starter Jaiji

    (@jaiji)

    1 year, 4 months ago

    Thank you! I’ve added that to the Custom Code section on the settings page, all good. I’d been adding CSS directly to the template, which worked for a scale transition on the background image.

    I appreciate the prompt and helpful support.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Hover transitions’ is closed to new replies.