CSS Hover gallery does not work in wordpress

[loschris]

I have a simple CSS hover gallery which displays a photo when a user hovers on some text. It works fine as a stand-alone html, but when added to a wordpress page it does not works properly - the width of the image is limited to the with of the text which is a list element.

Any ideas to solve this please?

[ralph.m]

We'd need to see a link ... but there's no reason it can't work in WP per se. There may be some other styles / scripts on the WP page that are interfering.

[loschris]

the site is
http://www.lewesoperatic.co.uk/index...y-malone/cast/. The code in question is ot live yet.
The new code is based on the code found at http://sonspring.com/journal/hoverbox-image-gallery. I have got it work by adding

max-width: 200px;

to the

.hoverbox .preview

style. That seems like an ugly fix though.

[loschris]

Hi Ralph. Have now gone live with max-width at 1000px, to cover and image size I may want.

[ralph.m]

Have now gone live ...

Where is it? I don't see it on the page you posted.

[loschris]

It's at http://www.lewesoperatic.co.uk/index...y-malone/cast/

Hover over the underlined names to display photo. If I were to remove the max-width declaration the photos are restricted to the width of the text.

[ralph.m]

This CSS rule in images.css is getting in the way:

.entry-content img {
height: auto;
margin: 0 0 18px 0;
max-width: 100%;
}

It's also probably better to remove width="150px" from the image itself, although it isn't causing the problem.

[loschris]

OK, Thanks - I couldn't track where the limitation was coming from. Thanks for your help

[ralph.m]

You're welcome. Have you explored the Inspect Element feature in Chrome etc? It's really handy. You can see what CSS rules apply to each element.

[loschris]

That looks much more useful than the one in Firefox. Thanks

[ralph.m]

That looks much more useful than the one in Firefox. Thanks

In the past, I would have recommended that you install Firebug for Firefox, as it's an excellent inspector tool ... but I feel that the inspect tools in Chrome have caught up. (The native inspection tools in firefox are pretty new and not very good.)