How to Add Hover Social Icons to Team Member Images with Divi

How to Add Hover Social Icons to Team Member Images with Divi

When building your about page, you might consider adding your company’s different team members in a showcase. When starting that design process, you’ll notice that three things can’t be missing off the bat: an image, a name and a position. But if you want to highlight your team members even more, you can consider adding their social network links to the design as well. Of course, you could go about it the old-fashioned way and add a Social Media Follow Module below the person’s name and position. However, you can also choose to add a tiny bit of interaction by triggering the social icons as soon as someone hovers one of the person images. In today’s tutorial, we’ll show you exactly how to do that using Divi. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

Mobile

hover social icons

Download The Layout for FREE

To lay your hands on the free layout, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Let’s Start Recreating!

Add Section #1

Background Color

Start by adding a new section to the page you’re working on. Open the section settings and change the background color.

  • Background Color: #0f0f0f

hover social icons

Spacing

Move on to the section’s design tab and change the spacing settings next.

  • Top Padding
    • Desktop & Tablet: 100px
    • Phone: 50px
  • Bottom Padding:
    • Desktop & Tablet: 100px
    • Phone: 50px

hover social icons

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

 



This article was written by Donjete Vuniqi and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top