Dynamic Author Bio Popup

A nifty little solution to create a dynamic author bio popup using GenerateBlocks!

Kyle Van Deusen

Published:

Filed Under:

Design

Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a resident of the Commonwealth of Virginia.

This content contains affiliate links. View our affiliate disclaimer.

In this video, I’m going to show you how to create a nifty little “popup” that displays author information when you hover over the author’s name in a blog post. Most of it will be done using just GenerateBlocks, but we’ll need just a pinch of CSS to get it. functioning.

Here’s the CSS you need:

@media (min-width: 1025px) {
  .author-popup{
	width: 410px;
	position: absolute;
	display: none;
  }

  .author-link:hover ~ .author-popup{
	display: block;
  }

  .author-popup:hover{
	display: block;
  }
}

.author-popup {
	display: none;
}
Share This Article!
Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a resident of the Commonwealth of Virginia.

Come Join Us!

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

Kyle Van Deusen

Community Manager

Latest Events

September 16, 2025

Termageddon 2.0

Better Tools, Smoother Workflows, Happier Clients

August 19th, 2025

Which WordPress Page Builder is the Most Accessible?

The 2025 Page Builder Accessibility Report

August 15, 2025

Managing Your Agency with Moxie

Can this all-in-one solution help you streamline your agency and calm the chaos?
Care Plan Toolkit

Save time, boost profits, and confidently manage client websites with proven tools, tips, and resources.

Bento Toolkit
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!

More Articles

Lead magnet

Lead magnet ideas for web designers (and how to use them)

Discover the best ideas for lead magnets in our latest blog! Plus, learn how to use them & how to nurture leads so you get more paying clients to your website. Read today!

Home post

Should You Include a “Home” Link in Your Website Navigation?

You and I know that clicking the site logo takes us home — but is that “general knowledge”? We ran an experiment to settle it once and for all!

Navigations

Most (and Least) Popular Agency Website Navigation Items

Your navigation is arguably one of the most essential parts of your website… but is yours what your customer’s are expecting?