How are these sites implementing their onhover overlays?


Tags: jquery,html,css,hover,overlay

Problem :

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?



Solution :

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
}

    CSS Howto..

    How can I completely cancel a class when a CSS media style is used?

    How to use bootstrap to hide one of div when zoom browser windows size smaller

    How to make width of navigation auto, while absolutely positioning its wrapper

    how to manage layers in position:absolute css block

    How to change transparency of background image using javascript?

    How to create a circumference with CSS? [closed]

    How to use Open Sans font with cakePhp 3?

    How to fade loop background images in Twitter's Bootstrap 3

    How to add a repeating png image in the background of a webpage using CSS?

    How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?

    how to break unordered list of links with image or color with css

    How to do “display = block” using jquery for particular element

    Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

    How to get the perticluar image from large set images in one image using css

    How to keep long image within background cover at any screen size in CSS?

    How do I make buttons that have the same transitions and some of the same properties, but then also have some differing properties?

    How to design HTML header

    How can menu items be displayed from bottom up using CSS

    how to put marquee div at the back of another none marquee div?

    How should i improve my jQuery click funciton?

    How to define css selector class prefix with SASS

    How to bind click event on image added using CSS 'background-image' property in jQuery

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    Uncaught SyntaxError: Unexpected token . AKA how to check for an Id in jQuery [closed]

    How to switch fixed elements when scrolling down the page

    How to rotate a chart 90 degrees including the text values?

    How to properly escape attribute values in css/js attribute selector [attr=value]?

    How to write persistent CSS box rules?

    How to create vertical text using only CSS?

    how to go bottom of a website like back to top using javascript?