hover effects, etc.: speed setting

[jhguynn]

Surely there must be a setting somewhere (javascript?, css?) that governs how quickly hover effects, image swap-outs, etc., occur in the Genesis environment. I've tried to use an image sprite with a hover effect css to make a snappy image transition on mouseover, but it's so damn slow to change on mouseover it just looks stupid. What should occur lightning quick, i.e. imperceptibe to the naked human eye, is anything but.

I find this to be true of the usual native Genesis hover effects for buttons, social icons, etc. on mouse over. It's just too damn slow.

How can I improve the performance of these effects in Genesis?

[Tom]

The effect and timing will depend on the CSS design of your theme. It is not governed by "the Genesis environment".

"Hover" is a pseudo class selector for images, links, buttons, etc. and can take on many properties. Some of these are controlled by CSS transitions, animation effects, etc..

Good reading starts here: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[jhguynn]

The above mentioned properties re: hover effects being sluggish pertain to the Studiopress themes I'm using, such as Executive Pro and Enterprise Pro. Still looking for some clues to get better performance with these effects.

[jhguynn]

an added thought: the troubles I'm having are specific to Studiopress themes. Watch this video for a comparison between two themes, one Studiopress and one not:

Hover effect: Comparison of two themes: Enterprise Pro and Flexsqueeze

FYI: The exact same code and css is used for both.

[Tom]

I would ask you to post links to both sites, but I can see that one is on a local DEV setup. However, If you can do this it would be appreciated.

As I said: The effect and timing will depend on the CSS design of your theme. It is not governed by “the Genesis environment”. The effect show in the 'flexsqueeze' site appears to be using CSS or javascript animations and/or transitions.

Beyond that, it is unlikely, if not impossible, for two themes from two different shops using two different frameworks to use "the exact same code". It's simply not directly transferable; there has to be a translation or re-mapping to the markup as defined from one theme to the other, If you are using a plugin to achieve the effects, perhaps the author could explain why his plugin behaves differently from one theme to another, It seems kind of a moot point as those images and animations are not currently visible on your site. ( http://oi60.tinypic.com/1xz0ie.jpg )

For your current Enterprise Pro theme: it uses the mildest of transition effects as follows. You could modify this to use broader animations and transitions or add javascript effects.

a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button {
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition:    all 0.1s ease-in-out;
	-ms-transition:     all 0.1s ease-in-out;
	-o-transition:      all 0.1s ease-in-out;
	transition:         all 0.1s ease-in-out;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts