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

What you need to know about figma

Figma Tips and Tricks: A Crash Course for Beginners

One of my good friends recently started transitioning from Adobe XD to Figma. As he’s been …

Barfly profile nirmal desai

Member Spotlight: Nirmal Desai

When Nirmal Desai entered the WordPress world in 2013, he didn’t have a plan—just a deep …

Magic layout

Mastering CSS Grid: A Step-by-Step Guide to Grid Template Columns

CSS Grid has been a game changer for me, especially with the grid controls available in …