Elementor: How to create an effect card from a portfolio

Would you like to learn how to create a card with the effect of a portfolio? In this new tutorial, we will show you how to do it with Elementor.

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.

Read also: How to display text above an image with Elementor

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 select the middle column, and drop in this column the Internal Section Widget. The Internal Section widget is configured with 2 columns by default. Under the 2 columns, let's drop the widget Title with the title Restaurant, select H4 for the HTML tag, and Center for alignment.

In the tab Advanced of the Title widget, Let's enter 30 for Top Margin

Let's once again select our Internal Section. In the panel, let's modify its Height on Min Height and Minimum height let's set the cursor to 380. Then, let's delete the right or left column of the Internal section

Let's drop it Image widget in the Internal Section and insert an image from our library. let's select Whole for Image Size et Center for Alignment.

NB: If you want to have complete pages like ours, we invite you to capture the pages with the help of the Chrome extension GoFullPage but you can use another one as well.

Discover also: How to create an image gallery with Elementor

Then in the Tab Style, click on PX de Width, let's set the slider to 260 and border rays on 10

Next let's modify the Box Shadow by changing the Blur to 40 and Diffuse to -10.

In the Advanced tab, in the section Positioning, select Absolutely for Position, Horizontal Orientation on Left-footed, shift on 0,Vertical Orientation on Bottoms.

Let's duplicate our Image widget twice. Inevitably they will all be superimposed. Let's bring up the Navigator so we can access the other widgets hidden by the first one.

Let's replace the image of the second Widget and in its Tab Advanced, let's modify them bottom margins et Left-footed grabbing 30 for each. You will now see a slight lag, 

Do the same for the third Image Widget, but apply margins of 60 for the Bottom and Left margins. You should now have an overview of all 3 Image widgets.

Let's select our Internal Section widget, go to its Tab Advanced and in the section Custom CSS, copy and paste the following code snippet:

selector .elementor-widget-image{
    transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
    transform: scale(.65);
}
selector:hover .front-img{
    transform-origin: center left;
}
selector:hover .mid-img{
    transform-origin: center top;
}
selector:hover .last-img{
    transform-origin: bottom right;
}

(If you don't have this section then you don't have the Pro version, if you want to continue you need to upgrade your version)

Now if you hover over our map you will have a zoom animation

Let's select our first Image Widget (the lowest one) and in its Tab Advanced, let's enter front-img for CSS classes.

For the second Image Widget, let's type mid img for CSS Classes.

For the third Image Widget, let's type last-img for CSS Classes.

See also: How to Create a Tabbed Gallery of Images with Elementor

Hovering over our column now we will see a magnificent animation of the contents of our Internal Section.

Let's display our page in tablet mode We will see that the images will not be displayed correctly.

Select the first Image widget, in its Style tab, let's modify the width by clicking on PC and then entering 150 as the width. Let's do the same with the other 2 Image widgets.

Let's select our Internal Section, in its section Contents, let's modify the Minimum height on 225.

Let's also display our page in Smartphone mode, a priori it does not present any problem. But, if it presents any, let's select our Internal Section, in its section Contents, let's modify the Minimum Height.

Now let's duplicate our middle column twice, then delete the other two empty columns.

Let's modify the Titles of these columns then change the images

You will have to have a magnificent section of which here are the results:

There you go, you have just done this task easily.

Get Elementor Pro Now!

Conclusion

There it is ! That's it for this article that shows you how to create a card with the effect of a portfolio. 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.

...