Elementor: How to Zoom a Profile Card

Would you like to find out how to Zoom on a profile card with the page builder plugin Elementor ?

In this new tutorial Elementor, we'll show you how to apply a Zoom effect on a profile card, while revealing the name of the profile as well as its social network icons.

If you have no idea what we want to talk about today, we invite you to watch the following video:

Then let's go back to why we are here.

To complete this tutorial, you will need the Pro version of Elementor, because we will be using custom CSS code which is only supported by this version ofElementor.

Let's create a new section with a 3 column structure, then in the panel, let's define the Height on Min Height, And then Minimum height let's click on VH and set the slider to 100.

Let's add a widget Internal section in the middle column. The Internal Section widget is by default configured with 2 columns, let's delete one of them. Let's configure the rest in the panel by modifying its Height on Min Height and Minimum height let's set the cursor to 400.

In the tab Style, let's modify the Background overlay. Click on Classic on the type of background, and select an image from the library and in the image settings, select Centered Centered on Position Cover on Size. Opacity on 1 and

In the section Bordures click on % and enter 4 for all curb radii.

In number of boxes, set the slider to 0 on Horizontal in 70 on Vertical in 63 on Flou in -60 on broadcast. You should see a beautiful shadow effect under your image.

In the internal section slide the Title widget. As title enter Steve Jobs, in the Style tab, select the color white # FFFFFF. In the typography, select the Size 20.

Then select the column of the Internal Section Widget and in the Style tab, select the type of border by clicking on Solid, all the widths on 1, and the colors on #FFFFFF.

In the tab Advanced, change the margins to 15 and internal margins on 20.

Now insert the social media icons by dragging the Social Media Icons widget into the Internal section.

Edit social media links in the tab Contents by clicking on Each social network. If you want to add other social networks, click the Add buttoner an element

On the Icon Field, click on Icon Library and in the search bar type the first letters of your social network, as soon as you find it, select it and click on the Insert button.

Then go to the tab Style, in the section Icon, change the color to custom.

Also read our guide on; How to add pagination with Elementor

Public chat Main Color, set transparency to minimum.

Public chat Secondary Color, select the color # FFFFFF. On Size, enter 20, Internal Margin on 0.4.

Now click on the tab Advanced, and in the section Positioning, click on custom. Sure custom width, enter 0.

See also How to Use Color Picker with Elementor

Public chat Position, select Absolutely, on Shift 15On Vertical Orientation to choose Bottoms, and shift on 20.

Select again the Internal section and in the tab Advanced, in the section Custom CSS (If you don't have this section then quickly upgrade to the pro version of Elementor to continue)

Copy and paste the following code into this section:

/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
    overflow: hidden !important;
}
selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    -webkit-transform-origin: left;
            transform-origin: left;
}
selector:hover .elementor-background-overlay{
    -webkit-transform: scale(2);
            transform: scale(2);
}

A priori you should not see much, but if you hover over the image you should see a zoom applied to the image.

Now copy and paste the following code after the previous code to show or hide certain elements of the column:

/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.75s !important;
    transition: all 0.75s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

Now as soon as you hover over the image, the zoom applies to the image, and the names and icons of social networks appear.

Let's duplicate this column 2 times and delete the other 2 columns.

Change the background image of Internal Sections, as well as the name and links of social networks.

There you go, you have just done this task easily. Just preview your tablet and smartphone work, trying to change the margins to match each device.

Get Elementor Pro Now!

Conclusion

So ! That's it for this article that shows you how to apply a Zoom effect on a profile card. If you have any concerns about how to get there let us know within Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...