Creative Team Member Section using Elementor | Glassmorphism
- tutorial
- Updated Aug 01, 2024
- By Jim Fahad
Quick Summary
Tools and Links Used
Hostinger
Fast, beginner friendly WordPress hosting.
Elementor
The free page builder this tutorial is built with.
Elementor Pro
The Pro upgrade used throughout this tutorial.
Project Files
Download the resources used in this tutorial.
Kitpapa
Ready made Elementor template kits.
Prompt Used in This Tutorial
Glass Effect CSS
selector{
--height: 150px;
--bottom: -150px;
}
selector.member-info{
height: var(--height);
position: absolute;
backdrop-filter: blur(15px);
bottom: 0;
transition: .5s ease-in-out;
}
Image Hover Effect CSS Class
member-info
Hover Hide/Show CSS
selector .member-info{
bottom: var(--bottom);
}
selector:hover .member-info{
bottom: 0px;
}
Get Your FREE Freelancing Roadmap
Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.
Free eBook Download
Related Tutorials
From learning the right skills to building a stronger digital presence, we help you turn ideas into practical, professional results.
Browse All Tutorials