Make your Website Pop with these WordPress Animation techniques: Hover on Card Effect

In this article I am going to share with you a cool animation in WordPress using little bit of CSS. As you can see in the above GIF, how the name of the person slides in when hover over the card. Let’s start.

This is the content hierarchy. This is only for one column. If you want to make multiple, just duplicate it. No big deal.

As you can see in the first column, there is an image. It is the image, that will be visible on which we hover over the mouse. After the image, there is a group of content when will slides in on the hover animation. Click on the Stack and in the block editor edit these things:

At the bottom of the Block Editor in the Advanced tab, add Additional CSS class: team-member

And click on the column from the layer selector and give it an Additional CSS class: team-members

Now the magic starts. Go to your website Appearance > Customize. At the bottom there is a additional CSS section. Click on it and add these styles:

.team-members{
  position: relative !important;
}
.team-members:hover{
  box-shadow: 0 0 10px 2px rgba(249, 241, 159, 0.5)
}
.team-member{
 opacity: 0 !important;
 bottom:10rem;
  position: absolute !important;
 transition: 0.4s ease-in-out;
}
.team-members:hover .team-member{
 bottom: 0rem;
 opacity: 1 !important;
}

Save the code and open the page in a new tab. See the animation. How cool it is Looking.

Thanks for reading😄