Display Play Icon Button Over Image On Hover

I’ve always liked video galleries which is why i’ve spent some time working out this solution.

This tutorial shows you one way to display a play button when your featured images are hovered over.

The images are displayed in a portfolio style grid layout like what you see in this screenshot:

And here’s what the code in this post adds when each image is hovered over:

How It Works

This method only uses CSS and a few lines of PHP code to make your admins dashicons display on the front end. If you already use dashicons on the front end, no need to add the PHP code below again.

Simply copy and paste the CSS near the end of your child themes style.css file before the start of your Media Queries.

Dashicons

If you haven’t already enqueued (loaded correctly using a special WordPress function) dashicons for use on the front end of your theme, copy this PHP code from the view raw link in the Gist and paste it at the end of your child themes functions.php file using a code editor.

Notes

• Tested on executive Pro however will work on Centric Pro or any StudioPress theme using the portfolio style archive custom post type.
• Media Queries not included.
• You can easily add exactly the same portfolio CPT archive page to any SP theme using the code from Executive Pro.

Use On Other Themes

If you added the portfolio CPT archive to the Enterprise Pro theme, here’s one example of what the hover button can look like without any modification.