Show Elements on Hover in Custom Cards

When creating custom cards you may want to have elements hidden by default and revealed on hover. This is possible using built-in utility classes.

Simply add the classname wpex-card-hover-reveal to any element you want to display only when hovering over your card.

Example:

Animation:

It’s possible to animate the element when it’s shown by adding an extra classname with the affect you want. Here is a list of additional classnames you can add to your hidden element:

wpex-card-hover-reveal--up
wpex-card-hover-reveal--down
wpex-card-hover-reveal--left
wpex-card-hover-reveal--right
wpex-card-hover-reveal--zoom

As an example have a look at the built-in Overlay 5 card style which makes use of the wpex-card-hover-reveal wpex-card-hover-reveal--up classnames for the title.