[Theme: Twenty Ten] .gallery CSS edit for a hover over

  • I’m working on my personal online portfolio, a child theme of twenty ten I have made myself. What I want to do is to have an image gallery show up on my portfolio page with a hover-over effect including caption display like in this non-interactive vizualisation. Later I’ll change the image links to lead to a page showing the work in more detail. I dont want a lightbox or any other pop-up flash gallery in this case. What I have so far is this: elisapyrhonen.net/portfolio. Finally, here’s the code I have been working on. I looked under wp-caption first but then ended up editing the .gallery-parts, both under the images section.

    After working unsuccessfully on the CSS yesterday I have three issues to solve:
    1) What is causing the overlay of the images? It appeared yesterday quite surprisingly and I couldn’t find out anymore which line I had stepped on
    2) When I tried changing the place of the caption text it disappeared apparently behind the images – any idea why?
    3) What line of code can I use to create the hover-over? I found some tutorials yesterday (like this and this) as well as tried to figure out how the AutoFocus theme does it in it’s CSS file but was unable to adapt any of these to my case.

    You might ask why I don’t use a gallery plug-in. I tried several of them and they didn’t work out as I wanted them to. My feeling is that if I really knew how to code the solution would be rather simple – I just edit and google for solutions rather than write code myself.

    Thank you so much for your help in advance!

    https://www.ads-software.com/extend/themes/twentyten/

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello!

    1) Try this:

    #gallery-1 dl {
     display:table;
}

    2) It seems that you figured this one out.

    3) A hover on the caption text? Try this.

    #gallery-1 .wp-caption-text .gallery-caption:hover {
     background: #AAA;
}

    Hope it helps,
    Pedro

    Thread Starter pyrhoska

    (@pyrhoska)

    Thanks Pedro for the quick reply!
    The first part worked, unfortunately the second one didn’t. Still looking for a way to do the hover….

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    https://getfirebug.com/

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Theme: Twenty Ten] .gallery CSS edit for a hover over’ is closed to new replies.

Tags