How do i replicate this hover effect ?

[Kaladan]

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 ?

[chrisburton]

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

[dfogge]

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

[chrisburton]

I would go with a CSS solution.

[dfogge]

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

[chrisburton]

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

[dfogge]

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

please note i toggled on Prefix Free.

[chrisburton]

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

[Kaladan]

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.

[bogus]

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?

[chrisburton]

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

[bogus]

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.

[chrisburton]

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

[dfogge]

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

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

[dfogge]

jinx! @chrisburton

[Author]

Posts