Last image hover over background overflows

HTML & CSS
1

If you click on the logo tab then you can hover over images and see an overlay. My problem is that on the last image the overlay overflows below the image. I tried overflow:hidden, but that didn’t work.

What’s wrong here?

thanks

2

Ready for a NAG ???

Validate your code, dude. They are not Wordpress errors :slight_smile:

Then look for a stray <br /> tag or two near and at the end of the line for that image. We’ve seen those before, too. Hopefully, that will fix you up. :slight_smile:

Cheers, Brian.

3

I think that you may have been looking at a different item on the page.

For some reason I had this “<span class=“ServicesImg”>” right before the </a> tag on the last image. Thanks. And yes I do need to keep remembering to validate.

4

Yes, it’s very possible that I misread it… sounds like I was in the ballpark, though. Not a home-run but at least man-on-base :lol: .

Cheers.

5

(Unrelated to OP)

Hey, Brian.

I just noticed something that you may want to try. The clickable area around the 4 blue circles near the bottom of the page resembles a wide U. It doesn’t just stay inside the circle… the upper right and left transparent “corners” outside of the circle respond to :hover and clicks, too.

If you add {pointer-events:none;} as shown below, it will pass the clicks through to the circle and will no longer be clickable outside of the circle. I don’t think “pointer-events” is supported in all browsers just yet, but you have nothing to lose by using it for the benefit of those that do support it… seems to me.

style.css (line 2036)


.circle-text div {
    color: #fff;
    float: left;
    font-size: 1.2em;
    line-height: 1em;
    margin-top: -0.5em;
    padding-top: 50%;
    [color=blue]pointer-events: none;[/color]
    text-align: center;
    width: 100%;
}

Cheers :slight_smile: