Our team section design using Elementor WordPress

In this How to Use Elementor WordPress tutorial, we showed 3 different and unique designs of our team section of the website. These are very high-converting Elementor web design inspirations for your next project. Our team section on the website is very common for any corporate website design. And, we tried our best to make it easy to understand.

Here’s the CSS code that we used for the styling in the video. You can copy and paste it to your project to try it out.

/* Style 1 */

.team-img {
	transition: 0.3s;
	position: relative;
}
.team-img:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #333;
	left: 0;
	top: 0;
	transition: 0.3s;
	opacity: 0;
	visibility: hidden;
}
.team-img:hover:before {
	opacity: 0.75;
	visibility: visible;
}

.team-social {
	position: absolute;
	bottom: 35px;
	z-index: -1;
	transition: 0.3s;
}

.team-box:hover .team-social {
	bottom: 100px;
	z-index: 2;
}



/* Style 2  */

.team img {
	transition: 0.3s;
}
.team:hover img {
	transform: scale(1.1);
}
.team-img {
	overflow: hidden;
}

.team-content h3 {
	margin: 0;
}
.team-content p {
	margin-top: 7px !important;
}



/* Style 3  */

.team-img::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #333;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s;
}

.team-img:hover ::before {
	opacity: 0.75;
	visibility: visible;
}

.team-title h2,
.team-desc h5,
.team-social {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s;
}

.team-title h2 {
	bottom: 170px;
}
.team-desc h5 {
	bottom: 90px;
}
.team-social {
	bottom: 80px;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s;
}

.team-box:hover .team-title h2 {
	opacity: 1;
	visibility: visible;
	bottom: 200px;
}
.team-box:hover .team-desc h5 {
	bottom: 115px;
	visibility: visible;
	opacity: 1;
}
.team-box:hover .team-social {
	visibility: visible;
	opacity: 1;
	bottom: 110px;
}

Help us to inspire and produce awesome free WordPress tutorial videos like this. To do so, please subscribe to this YouTube Channel for exclusive content.

Bedside this how to build a free website video, we also recommend you to check out this article Essential Plugins to make your WordPress website efficient