Dynamic Author Bio Popup

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

Published:

Filed Under:

Design

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.

Author Bio Popup
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

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

February 10th, 2023

Choosing the Right Host For YOUR Needs

With so many options, how can you even decide?

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!
Vertical Banner

More Articles

Retro old tv against black color background. 3d illustration

Top 5 YouTube Channels to Learn about GenerateBlocks

Level-up your GenerateBlocks and GeneratePress skills with these top YouTube channels!

feedback

How To Make The Website Feedback Process Easier For You (And Your Clients!)

Get expert insight into refining your website project feedback process to maximize your team’s output and client satisfaction in this guest blog post.

Kyle_Van_Deusen_Create_a_detailed_pen_and_ink_sketch_of_a_lapto_f1994437-e41d-4858-929b-3104137eb7c6

How to Migrate Your WordPress Website Using the Free Migrate Guru Plugin

Discover the stress-free way to migrate your WordPress website using the free Migrate Guru plugin! Follow our step-by-step guide for a smooth and reliable migration experience, no matter your host.