In this Elementor tutorial I will show you how to pull off this cool card hover effect just using 2 lines of CSS code.
Timestamps:
- 0:00 Introduction
- 1:51 Setup Main Container
- 2:30 Setup First Column
- 4:50 Setup Hover Card Effect
- 8:25 Add CSS Code
- 10:15 Change Animation Direction
- 11:28 Duplicate Columns
- 11:56 Adjust Column Gaps
CSS Code
/* Initial State */
.pillar-hover {
transform: translateY(80%);
transition: transform 1.2s ease;
}
/* Hover State */
.pillar:hover .pillar-hover {
transform: translateY(0%);
}
