CSS Hover gallery does not work in wordpress

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?

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.

the site is
http://www.lewesoperatic.co.uk/index.php/bugsy-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.

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

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

It’s at http://www.lewesoperatic.co.uk/index.php/bugsy-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.

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

.entry-content img {
height: auto;
margin: 0 0 18px 0;
[COLOR="#FF0000"]max-width: 100%;[/COLOR]
}

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

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

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

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.)