Title: Hover transitions
Last modified: January 21, 2025

---

# Hover transitions

 *  Resolved [Jaiji](https://wordpress.org/support/users/jaiji/)
 * (@jaiji)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/hover-transitions/)
 * 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](https://wordpress.org/support/users/brechtvds/)
 * (@brechtvds)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/hover-transitions/#post-18256519)
 * 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](https://wordpress.org/support/users/jaiji/)
 * (@jaiji)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/hover-transitions/#post-18256570)
 * I have this in the template (based on Hover with Date):
 *     ```wp-block-code
       [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](https://wordpress.org/support/users/brechtvds/)
 * (@brechtvds)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/hover-transitions/#post-18257204)
 * Could you try adding some CSS like this (you will need to adjust the template
   selector):
 *     ```wp-block-code
       .wpupg-template-test-hover .wpupg-hover {  	opacity: 0;  	transition: all 1s ease;}.wpupg-template-test-hover .wpupg-hover:hover {  	opacity: 1;}
       ```
   
 *  Thread Starter [Jaiji](https://wordpress.org/support/users/jaiji/)
 * (@jaiji)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/hover-transitions/#post-18257235)
 * 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.

 * ![](https://ps.w.org/wp-ultimate-post-grid/assets/icon-256x256.png?rev=1135256)
 * [WP Ultimate Post Grid](https://wordpress.org/plugins/wp-ultimate-post-grid/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-ultimate-post-grid/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-ultimate-post-grid/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-ultimate-post-grid/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-ultimate-post-grid/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-ultimate-post-grid/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [Jaiji](https://wordpress.org/support/users/jaiji/)
 * Last activity: [1 year, 4 months ago](https://wordpress.org/support/topic/hover-transitions/#post-18257235)
 * Status: resolved