I tested it in several browsers and found it didn’t work in some, either giving a white box over the image, or no text on hover
It failed in IE11, Safari in Windows 10 and in iOS11, but works, I am told in MacOS 10.12 + Safari 11
I suspect it might need some browser specific code to work, but haven’t much practice with hover transitions like this, Does anyone know what needs to be added to make it work in these browsers?
At a quick glance it all seems fairly standard stuff, just done with pseudo classes and selectors, nothing out of the ordinary or ultra modern.
That demo works fine in IE11 here, unless I’m missing something.
Forget all about Safari in Windows, it’s a non-entity, a thing of the past.
Unless targeting old browsers you shouldn’t need prefixes I don’t think.
But do note the correct syntax for pseudo elements is two colons, eg ::before and it is just one for pseudo classes like :hover. Though browsers are quite forgiving of this common error.
This page is working fine in IE11, Edge and IOS11.1.
You will have to post your version of the code to see where you went wrong but I suggest you first try out the demos on that link you gave just to see for yourself that it does work in IE11 and ios 11.1.
However in ios you won’t have a hover effect as such because hover doesn’t really work on mobile and what you get is a first touch that acts like hover but will not disappear. This is what happens on the demo. You will probably need to add an empty onclick handler onto to .box to make the hover show in ios (but it won’t disappear until you click somewhere else).
There is no Safari for windows 10. Safari on Windows was discontinued years and years ago long before most of this css3 stuff emerged so of course will not work. Don’t use it if its on your system as it will be a security nightmare. Destroy it immediately as no one uses it and its of no use for testing whatsoever.
I’ve just tested it in Windows 7 with IE 11 as that’s the only old machine here with IE 11 on it, while a friend looked at it in Windows 10 with IE 11 and we both get a white box over the image.
The site is scheduled for a major update soon, but they want this item with a new offer up now.
I only tried Safari for Windows as I wanted a quick look at it in Safari, and had to install it just for this page as I was told one director of this club only uses a Mac and an iPad.
I’ve added Paul’s onclick()
That just leaves IE11 to sort.
The original bestjquery’s demo does work with IE11, so I must be missing something simple somewhere.
Hover box code is at the very end of the two_cols.css file
EDIT And paul’s demo works with IE11 - I’m tempted to copy his entire code and try it on my test page!
But it just gave the same result…
Embarrassing!
It’s one of many things to be removed and updated when the redesign starts. It’s left over from so long ago, I can’t remember when it was put there! I seem to remember thinking a couple of years ago that it should be removed and forgot to do it. Parts of this site are over ten years old.
You always seem to find the bits that others overlook.
Sincere thanks.
