Enterprise Pro – odd hover effect using sprite and css

[jhguynn]

I often use sprite images and css to get a nice hover effect on mouse over. This can be viewed here, on a site using a non-genesis theme: http://www.lifepolicydetective.co.uk. Hover your mouse over the images for "Specific Case Studies" and "FAQ's".

I'm in the process of converting this site over to Enterprise Pro. I get a weird result I get with the same sprite images and the same css. The video below illustrates the choppy movement of the image - the first example is Enterprise Pro, the 2nd example is from the above link, i.e. another non-genesis theme.

Compaison of 2 sites - sprite hover effect

Here is the css I'm using (I give the .faq class as an example):

.faq {
        display: block;
	width: 250px;
	height: 250px;
	background: url(http://www.lifepolicydetective.co.uk/wp-content/uploads/2014/01/faq-sprite.png) bottom;
	text-indent: -99999px;
}
.faq:hover {
	background-position: 0 0;
}

How can I get this to work smoothly in the Genesis environment? It's as if the theme responds sluggishly to the css prompts. Thanks for the help.

[jhguynn]

Bump. Any help on this? Thanks.

[pbbutler]

I have a similar problem with the latest version of optimal. Its caused by a transition effect placed on all a tags (all links, which my hover buttons happen to be)
I could not work out how to override this so I had to remove it as per the code below

/* a, */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
-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;
}

Hope this helps

[jhguynn]

pbbutler:

That's really helpful - thanks. What you identified - i.e. "It's caused by a transition effect placed on all a tags " - I had no idea.

I wonder if anyone else here knows how to override it?

And why is this effect even there? It makes all buttons, etc., behave sluggishly.

[Brad Dalton]

Hi Jeff

To be honest, i don't really have the solution for this but just looking at the CSS, why do you use the full URL rather than the path to your images folder in your child theme?

You might also consider asking this question on CSS Tricks or the CSS section of Stackoverflow if you can't get it resolved here.

---

Tutorials for StudioPress Themes.

[Author]

Posts