Skip to Main Content

How to add a rollover effect with details for Divi images

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

It's no secret that the "Who We Are" pages are very good for generating clicks on your website. It is also this type of page that will focus on the human part of the business behind the website. Knowing this, we recognize that it is important to pay attention to how we structure pages, the type of information we share, and how we create interactions.

One of the things you can do to enhance the page experience is to provide a section of team members that puts your employees in the limelight. In addition to that, you can add a bioflash effect to team members' photos using the built-in Divi options only.

This will save you space on the page you are working on and create a hovering interaction between you and your visitors.

In this tutorial, we will show you, step by step, how to get there. Once you get the approach, you can customize the design style to suit your own needs.

Let's go!

Preview

Before diving into the tutorial, let's look at the result on different screen sizes.

Office

divi-bio-hover-effect-desktop-gif.gif

Mobile

divi-bio-hover-effect-mobile-gif.gif

Let's start recreating

Add a new section

Spacing

Create a new page or open an existing one and add a new section using the following custom fill values:

  • Best padding: 100px
  • Bottom padding: 100px

bio hover effect

Add row 1

Column structure

Once you have finished adding custom fill to your section, you can close the section settings and add a new row using a single column.

bio hover effect

Add a text module

Add H2 content

Add a Text Module title to the column with an H2 size of choice.

bio hover effect

H2 text settings

Then access the H2 text settings and make some changes to the appearance of the copy.

  • Heading 2 Font: Cinzel
  • Title 2 Font Style: Small Caps
  • Title 2 Text alignment: center
  • Title 2 Text Size: 70px

bio hover effect

Add a division module

Visibility

Continue adding a new separation module just below the Text Module title.

  • Show Divider: Yes

bio hover effect

Color of the separator

Go to the Design tab, open the color settings and change the color of your divider accordingly:

  • Color of the separator: # 333333

bio hover effect

sizing

Then we will reduce the size of the divider and center it.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

  • Width: 26%
  • Alignment of the module: center

bio hover effect

Add the 2 line

Column structure

Just below the previous line that you added, continue and add a new row using three columns of equal size.

bio hover effect

sizing

Without adding more modules, open the line parameters and make some changes to the sizing parameters.

  • Use a custom width: Yes
  • Unit: PX
  • Custom width: 2000px
  • Use a custom gutter width: Yes
  • Gutter width: 1
  • Equalize column heights: Yes

bio hover effect

Spacing

Then, access the spacing settings and add custom margin and fill values.

  • Upper margin: 50px
  • Bottom margin: 50px
  • Top Padding: 10px
  • Bottom padding: 10px
  • Left Padding: 5px
  • Upholstery Right: 5px
  • Column 1, 2 and 3 Padding on the left: 5px
  • Column 1, 2 and 3 Padding on the right: 5px

bio hover effect

Shadow box

We also give our line a little depth by adding a box shadow with the following parameters:

  • Box Shadow Blur Force: 80px
  • Shadowbox propagation strength: -14px
  • Shade color: rgba (0,0,0,0,3)

bio hover effect

Add an image module to the 1 column

Load an image into an image module

It's time to start adding modules! To achieve the biological overflowing effect, we will need two modules in total. an image module and a blurb module. The Image module will contain the image of the team member you want to present.

The Blurb module, meanwhile, will be used to add the icon in the lower left corner and the flyby biography. Add an image module to the first column using a square image.

bio hover effect

filters

The design we create is entirely in grayscale. To add this shade of gray to our image, go to the filter settings and remove all the saturation.

  • Saturation: 0%

bio hover effect

Add the Blurb module to the 1 column

Add content

Continue adding a new Blurb module just below the image module in the 1 column. Add the team member's name to the title field and enter additional information about the team member in the content area.

bio hover effect

Choose an icon

The next thing we will do is choose an icon of choice that will show visitors that there is more than just a picture.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

bio hover effect

Default background color

Then we will choose a full transparent background color.

  • Background color: rgba (255,255,255,0)

bio hover effect

Background color on flyover

And we will change this color hovering.

  • Background color: rgba (255,255,255,0.88)

bio hover effect

Default icon settings

We want a visible icon that will help visitors understand that they can fly over it. Change the icon settings to get such an icon.

  • Icon color: #ffffff
  • Circle icon: yes
  • Circle color: # 000000
  • Icon location: left
  • Use icon font size: Yes
  • Icon font size: 50px

bio hover effect

Parameter of the overflight icon

However, we do not want the icon to appear overflown. That's why we use a totally transparent color instead.

  • Icon color: rgba (255,255,255,0)
  • Color of circle: rgba (255,255,255,0)

bio hover effect

Default title settings

Then go to the title's text settings and make some changes.

  • Title Police: Cinzel
  • Title Font: Bold
  • Title Font Style: Small Caps
  • Color text title: # 000000
  • Text Title Size: 0px

bio hover effect

Hover over the text settings of the title

Change the size of the text by hovering.

  • Text Title Size: 30px

bio hover effect

Default body text settings

Also change the body text settings.

  • Body Police: Open Sans
  • Body colored text: # 000000
  • Body text size: 0px
  • Body height: 1.8em

bio hover effect

Parameter of the body on overflight

And, again, change the body size of the text hovering.

  • Body text size: 14px

bio hover effect

Default spacing

Last but not least, we will need to create an overlap between the Blurb module and the image module using a negative upper margin.

  • Upper margin: -3.7vw (desktop), -9vw (tablet and phone)
  • Bottom margin: 1.5vw (tablet), 2vw (phone)

bio hover effect

Stationary spacing

Change the custom margin and fill values ​​in rollover.

  • Upper margin: -11,38vw
  • Top Padding: 20px
  • Bottom padding: 20px
  • Upholstery Right: 50px

bio hover effect

Clone the two modules twice and place the duplicates in the remaining columns.

We have finished creating our first biological hover effect. To save time, we can simply clone the two modules in the 1 column twice and place the duplicates in the two remaining columns.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

bio hover effect

Modify the image and content of the Blurb module

Do not forget to change the image in the Image module and the copy in the Blurb module to finish the section of the team members!

bio hover effect

Preview

Now that we have gone through all the steps, let's take a look at the result on different screen sizes for the last time.

Office

bio hover effect

Mobile

bio hover effect

Latest Thoughts

In this article, we showed you how to create a biological hover effect for team members' photos using the built-in Divi options only. We emphasized how important it is to create good pages because they are one of the most visited websites.

Using organic flyover effects for team members' photos will not only improve the quality of your page, but also create interaction with your visitors. If you have any questions or suggestions, be sure to leave a comment in the comments section below!

This article features 4 comments

  1. Hello,

    Thank you for this tutorial, it was very useful to me.
    However, I encounter 2 small problems:
    - the background in overflight does not apply (I have the impression that it is behind the image…)
    - the overview does not open in the same way as in the example (my text remains at the same height as the icon and does not open up) which gives me a nice rendering.

    Do you have a solution? Thank you.

    Good night

  2. Hello,
    Thank you for this tutorial, it is very well explained.
    However, I have a problem with hovering over the mouse, my tremble hover is not fluid. Do you know what this is?

    Thank you

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
2 shares
Share2
tweet
Save