Slow down hover effect [smoother transition on hover]

Tagged: 

Author Posts

robertlo September 6, 2016 at 7:07 pm

Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.

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 September 8, 2016 at 11:31 am

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 September 8, 2016 at 3:18 pm

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 September 13, 2016 at 1:07 pm

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 September 13, 2016 at 6:26 pm

I understand. Thanks again for the great support!

You must login or register to reply to this topic.