This WordPress plugin extends the core Cover block to create a 'hover reveal' card experience with subtle animation and considerations for prefers-reduced-motion respecting a visitors preference for non-essential motion.
The final pattern is registered within the plugin, but it could also potentially be included directly in a custom WordPress theme. It can also be found on the WordPress Pattern Directory as Grid Cards.
The accompanying post resides on the WordPress Developer Blog: Building a card layout with a “hover reveal” effect.
- Download this plugin as a zip (click on 'Code' and choose 'Download ZIP')
- Place the un-zipped directory in your WordPress
wp-content/pluginsdirectory - Activate the plugin
- Create a new post / page and add the 'Hover Reveal Cards' pattern.
- Save and preview the final 'hover reveal' card effect.
Feel free to fork it and use it however you like!
Update CSS to account for editing experience: remove hiding/showing of elements by targeting :not(.has-child-selected).
Initial launch.