Hovers not working

I just can’t seem to get this right!!!

As far as I’m aware I have all the html and css in place but I’ve tried pplaceing the following code in numerous places, in the head, in the body etc etc and it just won’t work.
What Am I doing wrong still?

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
		<script type="text/javascript" src="http://www.sakeenaheducationcentre.com/wp-content/themes/StyleShop/js/modernizr.custom.79639.js"></script> 

the page is here: Home school education

Can you be more specific about what is not working?
How does the Javascript and Stylesheet relate? You can get ‘hover’ simply with CSS.

Your problem is unclear.

this is exactly how it should be:

hantaah, We could use a better description of the problem than “hovers not working”. Are your images supposed to present one of the animated effects that are shown on the other page http://tympanus.net/Tutorials/CircleHoverEffects/index5.html ? If so, which effect? FYI, the bottom image on your page is not loading.


have I not?

My page is here looking like this: http://www.sakeenaheducationcentre.com/games/
they should be doing this: http://tympanus.net/Tutorials/CircleHoverEffects/index5.html

so on my page nothing happens when you hover over the circles. On the other page you can see the hover effect, that is what i’m trying to get


The CSS file you are referencing in your supplied code is not the CSS that the effect on your example page is using. Those demo pages are using CSS documents that are on their server and not provided by the Google API. They are common.css and demo.css.

If you are trying to reverse engineer the page, make sure you take note of all documents that are used to render it. Inspect all CSS, JS and other linked documents to be sure you are using the right ones. For example when I click on the Google API CSS document I get this,

@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 300;
src: local(‘Open Sans Light’), local(‘OpenSans-Light’), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format(‘woff’);
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 700;
src: local(‘Open Sans Bold’), local(‘OpenSans-Bold’), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format(‘woff’);

Nowhere in this code are the hooks for the divs that your images are contained in. I’m not sure if you just didn’t supply the code in your OP or if you didn’t take it from the demo site.

Hope that helps,


There are two versions of jQuery on the page, also two versions of easing.js. That usually causes trouble. It would be better to gather all your scripts together at the bottom of the page and only add things in that you don’t already have.

I placed all the css in their tutorial in my style.css so all the css is there. I think it is what Ralph is mentioning. I always have an issue with this. I see what i can find but wordpress stops me from seeing what is there. It’s not easy to find it to delete it


I’m not sure how you’re adding these scripts in, but the ideal would be to work out what file they should go in (footer.php?) and place them manually. I haven’t used WP in ages, so can’t remember, but I wouldn’t use anything that inserts code automatically, if that’s what’s happening.

I think that is what is happening. I think perhaps widgets or plugins but also I think perhaps some functions or php code that I cannot see maybe. I’ll try and get my head around it. I did get it to work on my othr pages tho such as here:


so it makes me wonder why they work on there and not here:


Hm, and they both use the same scripts? That’s odd … Maybe it’s not the scripts then. But it would be worth making up a test page that has just what you need for it to work.

I’m not sure, I’ve not found where exactly I’m just thinking that’s what it might be. There’s also an intergration part where you can add code to the head, body or bottom of body. I might try doing as you say and gather it all and put it in the body in the intergration part. So can I confirm if I have a link to say an older version of Jquery and a newer version, I can just use the new link and that will cover all codes which require jquey?

Hopefully, yes. The only rider is that jQuery does change over time, and some scripts written for an older version might not work with a newer one, so you need to test that.