Slow down hover effect [smoother transition on hover]

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  robertlo 6 years ago.

Author Posts

robertlo

I set a part of my site to have a certain background on hover only, but I want to make it a smoother transition to the hover effect being on, instead of it just popping on like it does now.

Can that be done in the MT GUI?


Sebastian

Hey Robert,

You can’t do this via the GUI options in Microthemer yet. As we haven’t added animation or transition GUI options yet. It can be done via the GUI <> custom code field on the selector though. Set the background color to whatever you like on the non-hover selector you created. Then go to the <> custom code field on the hover selector you created and enter the following code in between the opening ({) and closing (}) curly braces already present:

background-color: #ccc;
 -webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;

Note, change #ccc above to whatever colour you like. And adjust the 1000ms to whatever speed you prefer.

Cheers,
Sebastian


robertlo

I was able to get it to work like you said with a background color, but… :

1. I wanted a background image and not a background color, but when I used the css for that with a repeat, the animation didn’t work anymore. It just popped to the background color on hover instantly without any easing.

2. That same element of the site also has a float hover effect on it using the css below, but adding the custom css you gave to me to that same element broke the ease transition of that css:

.hvr-float {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}

So I’ve just decided to keep it like it was. It’s not bad. And I don’t want to bother you with it, unless you feel like figuring it out. No big deal to me, though.

Thanks again,
Rob


Sebastian

Hey Robert,

1. Not all CSS properties are animatable. Including background image.

2. The code I gave you overrides yours if you placed it afterwards because it defines shorthand code for transition. This overrides your existing styles for the transition property.

Cheers,
Sebastian

*****UPDATE*****

Animation properties are available for styling now. Read more here:
https://themeover.com/animation-properties-ready-try/


robertlo

I understand. Thanks again for the great support!

You must login or register to reply to this topic.