Divi: The best WordPress theme of all time!

With over 901.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.

Would you like to learn how to create a card with the effect of a portfolio? In this new tutorial, we are going to 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:

create a card with portfolio effect

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

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

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 the fact Min Height, And then Minimum height let's click on VH and set the slider to 100.

3 column section

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

create a card with portfolio effect

Let's once again select our Internal Section. In the panel, let's modify its Height on the fact 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

create a card with portfolio effect

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.

create a card with portfolio effect

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

Easily create your website with Elementor

Elementor lets you create Easily and Free any website or blog design with a professional look. Stop paying a lot for a website you can do yourself.

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

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

create a card with portfolio effect

In the Advanced tab, in the section Positioning, select Absolutely for Position, Horizontal Orientation on the fact Left-footed, shift on the fact 0,Vertical Orientation on the fact 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.

create a card with portfolio effect

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 60 for the Bottom and Left margins. You should now have an overview of all 3 Image widgets.

create a card with portfolio effect

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)

Do you want to sell your products on the internet?

Download WooCommerce for free, the best e-commerce plugins to sell your physical and digital products on WordPress and easily create your online store. Perfect for beginners.

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

create a card with portfolio effect

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 beautiful animation of the content of our Internal Section.

create a card with portfolio effect

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

create a card with portfolio effect

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 Content section, modify the Minimum height on the fact 225.

create a card with portfolio effect

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

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

create a card with portfolio effect

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:

create a card with portfolio effect

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.

...

0 shares
Share
tweet
Save