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 ?
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.
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?
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.
wow that's great but how do I get it to work with a whole div (not just an img) and additional links in the rollover like i have in my site mockup tingeltangel?
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 ?
I inspected the hover and this is what it came up with: http://cloud.chrisburton.me/LxcN
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
I would go with a CSS solution.
agreed @chrisburton, unless you're unfortunate enough to require ie6 support.
Here is a codepen: http://codepen.io/chrisburton/pen/xKLwd
just forked to add in the opacity and fade effects: http://codepen.io/derekfogge/pen/ChGkj
please note i toggled on Prefix Free.
Thanks @dfogge. I couldn't figure out the transition effect.
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.
I forked chris script again, because this is touching a problem that i too am facing atm.
Codepen
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?
@bogus Can you explain further in detail on what you're asking?
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.
@bogus Try this: http://codepen.io/chrisburton/pen/ebzmv
hey bogus, you just need to wrap the whole thing in an anchor tag.
like so: http://codepen.io/derekfogge/pen/ChGkj
jinx! @chrisburton
;)
Edit: Use @dfogge's solution.
Additional Edit: Actually, I would use mine as it uses less markup that does the same thing.
yeah, the div is redundant now that everything is wrapped in the anchor tag.
wow that's great but how do I get it to work with a whole div (not just an img) and additional links in the rollover like i have in my site mockup tingeltangel?
@bogus You might need to restructure your thumbs.
yes i think so. but how? would you suggest putting the tags into an UL? I'm always affraid of not being able to adapt the thing to wordpress again..
what's the best way to get evrything working. especially with nonfixed container dimensions..
@bogus Start a new thread, please.