fbpx
The Admin Bar

Create a Hover Card with GenerateBlocks

Feb 20, 2022

By: Kyle Van Deusen

Filed Under:

This page contains affiliate links in accordance with our affiliate policy.
☀ Read in Light Mode

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"

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"

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"

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.

tab headshot ml
Kyle Van Deusen
@kylevandeusen

Kyle is the co-host of The Admin Bar, the owner of a agency of one called OGAL Web Design and the co-founder of Docket WP. You’ll likely find him trolling The Admin Bar community.

Enjoy this? Become an Official Barfly!

More from The Bulletin Board

Questions To Ask a Contractor Before Hiring Them

If you’re hiring a freelancer or contractor for your project, fit is everything. Get the right freelancer for the job with these thought-provoking questions.
Abby Wood
Apr 18, 2022

2022 WordPress Agency Survey

In March 2022, we put together an anonymous survey for all of our community members to ask them questions about...
Kyle Van Deusen
Apr 08, 2022

What do web agencies use for the H1 on their home page?

A few weeks back I was talking to one of my buddies in the group who was workshopping different ideas...
Kyle Van Deusen
Apr 01, 2022

Join Our Community

The Admin Bar Facebook group is at the heart of what we do. Join in on the daily conversation and get involved.
Join the Community
tab phone 4k member
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved
crossmenu