SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,294
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph. Have now gone live with max-width at 1000px, to cover and image size I may want.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,294
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by loschris View Post
    Have now gone live ...
    Where is it? I don't see it on the page you posted.

  6. #6
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,294
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    This CSS rule in images.css is getting in the way:

    Code:
    .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.

  8. #8
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, Thanks - I couldn't track where the limitation was coming from. Thanks for your help

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,294
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  10. #10
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks much more useful than the one in Firefox. Thanks

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,294
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by loschris View Post
    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.)


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •