A team card is a great way to introduce your team. It usually displays their profile picture, name, job title, and social media links. While you can add a lot of extra details, most people use a plugin to build these.
The problem is that plugins often have limited design options. If you know how to code, you can build anything you want—but don’t worry! In this post, we will show you how to create the exact team card you see in the image below, no matter your skill level.
First, create a main 300 x 400 px container and set a background image for it. Next, add an overlay on top of that image. Finally, create a second container inside the main one to hold all your information, and make sure to give this inner container the specific class name provided.
Class Name
inner-detail
The free version of Elementor doesn’t allow you to add custom CSS for optimization. To fix this, we are using the Royal Addons plugin. Once you install and activate it, you’ll be able to add your own code.
Simply copy the code provided below and paste it into the main container that uses the background image.
selector::before{
transform: translate(0, 300px);
transition: 0.5s;
transition-delay: 0.1s;
}
selector:hover::before{
transform: translate(0, 0px);
}
selector:hover .inner-detail{
transform: translateY(0px);
}
Once you finish these steps, your team card will be ready to use on your website! By the way, if you are building your site in WordPress and run into any trouble, we can solve it together—feel free to contact me.