fbpx

How to create profile card hover animation in elementor

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

In this video, I’ll show you how you can create a beautiful profile card animation in elementor using just CSS.

You can use this type of profile card in team members or such other sections of your website.

Here is the CSS

:root {
  --ribbon-color: #F44336;
  --ribbon-edge-color: #B71C1C;
}
.profile-card .elementor-image-box-content{
  background-color: var(--ribbon-color);
  padding: 10px;
  margin-top: -10px;
}
.profile-card .pc-back{
    width: 100%;
    padding: 10px;
    margin-top: -20px;
}
@media screen and (min-width: 1025px) {
.profile-card .pc-front{
    height:100%;
}
.profile-card .pc-back{
    position: absolute;
    height: 98%;
    width: 96%;
    right:0;
    margin:0;
}
.profile-card .elementor-widget-image-box{
    position: absolute;
    height: 100%;
    width: 100%;
}
.profile-card .elementor-image-box-img {
  width: 100%;
  height: 100%;
  z-index: 3;
  left: 4%;
  position: absolute;
  transition: all 0.3s;
}
.profile-card:hover .elementor-image-box-img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  left: 15px;
  top: 12px;
  width: 60px !important;
  height: 60px;
  z-index: 20;
   overflow: hidden;
  position: absolute;
}
.profile-card .elementor-image-box-content{
  position: absolute;
  top: calc(85% - 17px);
  left: 0;
  width: 100%;
  padding: 10px 16px;
  font-size: 1.4em;
  line-height: 1.6em;
  margin: 0;
  z-index: 10;
  transition: all 0.3s;
  background-color: var(--ribbon-color);
}
.profile-card .elementor-image-box-content:before,
.profile-card .elementor-image-box-content:after {
  content: ' ';
  position: absolute;
  left: 0;
  top: -16px;
  width: 0;
  border: 8px solid;
  transition: all 0.3s;
}
.profile-card .elementor-image-box-content:after {
  top: auto;
  bottom: 0;
}
.profile-card .elementor-image-box-content:after {
  border-top-color: var(--ribbon-color);
  border-right-color: var(--ribbon-color);
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.profile-card .elementor-image-box-content:before {
  border-top-color: transparent;
  border-right-color: var(--ribbon-edge-color);
  border-bottom-color: var(--ribbon-edge-color);
  border-left-color: transparent;
}
.profile-card:hover .elementor-image-box-content:before {
  top: 0;
  border-top-color: transparent;
  border-right-color: var(--ribbon-color);
  border-bottom-color: var(--ribbon-color);
  border-left-color: transparent;
}
.profile-card:hover .elementor-image-box-content:after {
  bottom: -16px;
  border-top-color: var(--ribbon-edge-color);
  border-right-color: var(--ribbon-edge-color);
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.profile-card .elementor-widget-heading {
  position: absolute;
  top: 100%;
  right: 30px;
  left: 30px;
  bottom: 54px;
  overflow: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: all 1.2s;
}
.profile-card:hover .elementor-image-box-content {
  top: 0;
  padding: 10px 16px 10px 90px;
}
.profile-card:hover .elementor-widget-heading {
  top: 50px;
  padding-top: 5.6em;
  opacity: 1;
  filter: alpha(opacity=100);
}
.profile-card .elementor-widget-social-icons {
  height: 0;
  overflow: hidden;
  transition: all 0.3s;
}
.profile-card:hover .elementor-widget-social-icons {
  overflow: visible;
  position: absolute;
  top: calc(85% - -2px);
  left: 0;
  right: 0;
}
.profile-card:hover .elementor-widget-social-icons .elementor-widget-container{
  height: 82px;
  padding-top: 15px;
  padding-left: 25px;
}
.profile-card .elementor-widget-social-icons .elementor-grid-item{
    bottom:-50px;
    opacity: 0;
    position: relative;
}
.profile-card:hover .elementor-widget-social-icons .elementor-grid-item{
    bottom:0;
    opacity: 1;
    transition: all 0.5s;
}
}

If you are not comfortable with CSS you can also download the profile card widget from the link below.

Disclosure: Some of the links here are referral/affiliate links which means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

Plugin used

Here are some of my favorite website building tools

Thank you for reading the article hope you have found this helpful. Here are some of my favorite tools that I always use and hope you will find them helpful too. Please note these are affiliate links, if you do purchase anything using my links I’ll earn a small commission at no extra cost to you. I recommend these tools to my clients and friends as well.

Web Hosting: For starting a new website, I like to use GreenGeeks. They are reliable and affordable for a beginner. They have a very simple setup process that anyone can use. I’m personally using their service for over a year now.

Page Builder: For building beautiful websites in a short period of time I like to use Elementor. It is one of the most powerful page builders in the market. You don’t need any technical knowledge to make websites.

Content Writing: When you make a website you have to add content to it. I use Grammarly to write better content. It improves the writing by checking spelling and grammar mistakes automatically. It has a premium version but for starters, the free version is a good starting point.

Advertising Network: When you have built the website and have traffic on it, ads are the easiest way to monetize the website. Adsense is the most popular choice but I recommend Ezoic which will give you a much higher earning than Adsense and the best part is it is free to use.

You may also like

Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

2 thoughts on “How to create profile card hover animation in elementor”

  1. I really learned a lot from this video tutorial, so Thank You.

    However, the link associated with the above button that reads “Download Profile Card Widget” isn’t working properly since it is linked to this very same page. Please, when you have that link, I would certainly appreciate you sharing the widget with me.

    Sincerely, John

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top