Grow your CSS skills. Land your dream job.

How do i replicate this hover effect ?

  • # January 5, 2013 at 12:30 pm

    This page here: > http://themejug.com/demo/galao/ has a simple yet elegant hover effect on images, and i can’t replicate it. I tried looking at the source code but it was an exercise in futility. Can any of you, css ninjas, help me ?

    # January 5, 2013 at 12:34 pm

    I inspected the hover and this is what it came up with: http://cloud.chrisburton.me/LxcN

    # January 5, 2013 at 2:37 pm

    they’re not doing it with pure CSS.

    they’re using a jQuery plugin called Mosaic.
    http://buildinternet.com/project/mosaic/

    A quick google lead me to a post by Jonathan Snook showing how to overlay hidden content on hover without javascript: http://snook.ca/archives/html_and_css/content_overlay_css

    # January 5, 2013 at 3:23 pm

    I would go with a CSS solution.

    # January 5, 2013 at 3:31 pm

    agreed @chrisburton, unless you’re unfortunate enough to require ie6 support.

    # January 5, 2013 at 4:09 pm

    Here is a codepen: http://codepen.io/chrisburton/pen/xKLwd

    # January 5, 2013 at 5:53 pm

    just forked to add in the opacity and fade effects: http://codepen.io/derekfogge/pen/ChGkj

    please note i toggled on Prefix Free.

    # January 5, 2013 at 6:20 pm

    Thanks @dfogge. I couldn’t figure out the transition effect.

    # January 6, 2013 at 5:27 am

    wow amazing. thank you guys, you really know your stuff. i sincerely hope that in the near future i will be good enough at this to help other people like you do.

    # January 6, 2013 at 8:28 am

    I forked chris script again, because this is touching a problem that i too am facing atm.

    [Codepen](http://codepen.io/anon/pen/dzoDB “”)

    I assumed that a thumbnail image should be clickable (like it is in the original link Kaladan posted). With the CSS trick it is only clickable, where there’s no white overlay. how to fix that?

    # January 6, 2013 at 8:38 am

    @bogus Can you explain further in detail on what you’re asking?

    # January 6, 2013 at 8:53 am

    sure, chris!

    the link Kaladan posted (themejug galao theme) shows thumbnails with rollovers you can click on to show the post.
    The CSS solution you posted in this thread resembles the rollover effect perfectly except for the fact that the thumbnail cannot be clicked anymore although the image is in a tags (see my fork of your script).

    only the outer area that is not covered by the rollover can be clicked. I’d like to know how make the whole thing clickable like it’s in the galao theme. Preferably without JS.

    # January 6, 2013 at 9:00 am

    @bogus Try this: http://codepen.io/chrisburton/pen/ebzmv

    # January 6, 2013 at 9:00 am

    hey bogus, you just need to wrap the whole thing in an anchor tag.

    like so:

    http://codepen.io/derekfogge/pen/ChGkj

    # January 6, 2013 at 9:00 am

    jinx! @chrisburton

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".