Question

I’m a css and js noob. I would like to accomplish what 500px.com, pixoto.com, pinterest.com have done, which is to accomplish div overlays on mouseover, revealing information about an image or buttons for voting, faving etc.

I’m pretty sure they aren’t using js to do this because I put a chrome > script > event listener break point on mouseover and it doesn’t trigger anything.

Their original html markup is minimal, just an “a” tag around an “img” tag for the most part, placed inside an “li” or “div”. that is, in most cases I don’t see any hidden divs that a psuedo a:hover class is revealing. In chrome I can inspect an elements “matched css” rules, but I never see a hover in there.

Of course these professional sites have many thousands of lines of codes of css and js, so I can’t definitely say I know what I’m talking about. so I’m just wondering if there is a tool that shows how css hover is triggered and by what css class?

Answer 1

The 500px.com site uses plain CSS.

They hide the score by setting opacity to 0. They show the by setting the opacity to 1 on hover.

Look in their CSS file and search for the following lines

.photos .thumb .info .right {
    ....
    opacity: 0; // this hides the score
}

.photos .thumb:hover .info .right, .photos .mobile_payment input.thumb:focus .info .right, .mobile_payment .photos input.thumb:focus .info .right {
    opacity: 1; // this shows the score
}