Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningCascading effect
In this lesson, we will create a section with a cascading effect of elements that overlap each other and thus give the impression of depth and three-dimensionality. We did a similar thing in the previous lesson when creating cascading cards, but this time the effect will be slightly different.
Step 1 - add an empty About me
section
Below the Projects modals
section, add a new About me
section, and place a grid with two equal columns in it:
Step 2 - add content to the columns
Add a card with a text to the first column and an image to the second:

Step 3 - add a cascading effect
Let's make the card overlap the photo to create a cascading effect.
First - remove the gap between the columns by adding class gx-0
to the element with class row
.
And since we're already at the row
element, we can immediately add the align-items-center
flexbox class here so that our card is exactly in the middle of the photo's height.
Note that for an element with a row
class, we don't need to add the d-flex
class to enable flexbox, because row
has it enabled by default. So we can immediately use flexbox modification classes.

And now we need to add a negative right margin to the card in the first column. So let's use me-lg-n5
class.
Note, that we are using -lg-
breakpoint because we only want our cascading effect on large screens (mobile devices lack space to implement it).


About author
Michal Szymanski
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.