Create a Hover Card with GenerateBlocks

In this tutorial, I’m going to provide you with the step by step instructions and the CSS needed to create a simple hover card using GenerateBlocks. Step-by-Step Instructions to Create a Hover …

Kyle Van Deusen

Published:

Filed Under:

Plugins

hover card with generateblocks
This content contains affiliate links. View our affiliate disclaimer.

In this tutorial, I'm going to provide you with the step by step instructions and the CSS needed to create a simple hover card using GenerateBlocks.

screen recording 2 20 2022 at 5.00 am
Example of completed hover card from this tutorial

Step-by-Step Instructions to Create a Hover Card

1. Open your page in the editor

2. Click to add a new block

Click to add a new block

3. Choose Container

Choose Container

4. Click on Spacing

Click on Spacing

5. Add some padding

This is optional, but necessary for the demo so we can have a little breathing room.

Add some padding

6. Click on Add block

Click on Add block

7. Click on Grid

Click on Grid

8. Choose 1 column

Choose 1 column

9. Select the container in your grid

Select the container in your grid

10. Change the container width to 33%

Any width will do, but this demo is setup for a 3-column grid

Change the container width to 33%

11. Click on Advanced

Click on Advanced

12. Add the class “hc-back”

13. Click on Backgrounds

Click on Backgrounds

14. Click on Browse

Click on Browse

15. Choose your background image

Choose your background image

16. Click on Select

Click on Select

17. Click on Colors

Click on Colors

18. Click on the background color

Click on the background color

19. Choose a dark color for an overlay

Choose a dark color for an overlay

20. Change the opacity of your background image

.2 to .4 usually works well, but this may vary depending on your image

Change the opacity of your background image

21. Click on Spacing

Click on Spacing

22. Give the container a minimum height

For the demo 300px was enough, but your use case may vary

Give the container a minimum height

23. Change the Vertical Alignment to “Bottom”

24. Click on Add block

You want to add this block inside of your container with the background

Click on Add block

25. Choose Container

Choose Container

26. Give your new container the class of “hc-front”

27. Click on Spacing

Click on Spacing

28. Click on Sync Units

Click on Sync Units

29. Add padding to your container

24px of padding was fine for this demo, but your padding may vary.

Add padding to your container

30. Click on Add block

Click on Add block

31. Click on Headline

Click on Headline

32. Enter the text you want to show on hover

Enter the text you want to show on hover

33. Change the tag to whatever is appropriate

For the demo I used a paragraph tag.

Change the tag to whatever is appropriate

34. Click on Colors

Click on Colors

35. Click on the Text Color

Click on the Text Color

36. Choose a light color

In the demo I used pure white (#ffffff).

Choose a light color

37. Click on Spacing

Click on Spacing

38. Make sure the text doesn't have any bottom margin

Make sure the text doesn't have any bottom margin

39. Click on Update

Click on Update

40. Click on View Page

Click on View Page

41. Click on Customize

Click on Customize

42. Click on Additional CSS…

Click on Additional CSS…

43. Add the following code

.hc-back {
	overflow: hidden;
}

.hc-front {
	transform: translatey(100%);
	transition: 200ms ease-in-out;
}

.hc-back:hover .hc-front{
	transform: translatey(0%);
}

}Add the following code

44. Click on publish

Click on publish

Once your hover card is working, you can go back into the page editor and duplicate the outer-most column inside your grid to create multiple cards, then style them as needed.

Share this article!

Kyle Van Deusen

The Admin Bar

Born in California and raised in Texas, Kyle is a husband and proud father of three. After spending 15 years as a graphic designer and earning a business degree, he launched OGAL Web Design in 2017, The Admin Bar community with Matt Sebert in 2018, and Docket WP with Andre Gagnon in 2020.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

September 16th, 2022

Kevin Powell Talks WordPress!

What we can learn from a master front end developer

August 19th, 2022

Optimizing Live with Perfmatters

Get a behind-the-scenes look at how Brian uses Perfmatters on live websites!

July 8th, 2022

New TAB Site Teardown

How any why I rebuilt The Admin Bar website with GenerateBlocks (Featuring Dave Foy)

More Articles

Login Credentials Blog Post

How to Share Login Credentials with Your Clients

You have probably heard about the importance of password management, but did you know that you can easily help your clients protect their passwords as well?

A computer taking money from a human

Step-By-Step Web Design Sales Process (with email templates)

The objective of this process is to qualify a new lead and take them from opportunity to paid discovery, to open project.

A crash test dummy sitting at a computer with his hands on the keyboard

Free Website Testing Tools for Web Developers

A collection of tools to help you test your website projects and find ways to improve your build quality.