Elementor tutorial for CSS card hover effects

In this Elementor tutorial, we showed a beautiful social icon CSS Card Hover Effects. We make this using the Elementor free version, not the Elementor Pro. So, we used CSS card hover animation effects for this. But it is 100% free and could have a high conversion rate when it comes to converting users to followers.

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.

.social-box__list {
	visibility: hidden;
	opacity: 0;
	transition: 0.3s;
}

.social-box:hover .social-box__list {
	visibility: visible;
	opacity: 1;
}

.social-box__list {
	visibility: hidden;
	opacity: 0;
	transition: 0.3s;
}
.social-box:hover .social-box__list {
	visibility: visible;
	opacity: 1;
}

.social-box {
	transition: 0.3s;
}

.social-box:hover {
	background-color: #f4f4f4;
	border-radius: 5px;
}

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.

We also recommend you to check out this article Essential Plugins to make your WordPress website efficient