Docs

[kavithachalla]

Hello,

I have Our Services section on the home page. Would it be possible to add animation to the icons in this section so that when the user hovers over the a Services image it changes color or vibrates, and also is there a way to make the icon clickable. Right now I only have the title text clickable.

How do I add animation or change the style of the button “About Us” when hovered over on the home page.

Thank you
Kavitha

[kavithachalla]

This reply has been marked as private.

[Lely]

Hello Kavitha,

Please add class custom-feature-box on the feature box class field then add the following custom CSS:

.custom-feature-box .x-feature-box-graphic-inner:hover i {
    color: red !important;
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

To make the icon clickable, please check this thread:https://community.theme.co/forums/topic/make-feature-box-icon-clickable/#post-731977

To customize button, this link might help:https://community.theme.co/kb/implementing-additional-button-colors/

Cheers!

[Author]

Posts