Beautiful Image Hover Effect Using Only Webkit CSS (No JS)

Re:Beautiful Image Hover Effect Using Only Webkit CSS (No JS) by NathanKP on Tuesday May 11, 2010 @09:37AM (#1337751)

Not really. Using JavaScript to add mask <div>'s is a messier solution, requiring more KB of code, especially if you want it to work on all browsers, even those that don't properly support DOM manipulation. Also the JavaScript would have to run after the other parent <div> has already been downloaded and rendered, meaning that there would be a brief time when there was no mask.

In my opinion, it is just easier and cleaner to add an extra <div> to the code than to add a bunch of extra lines of JavaScript to do the same thing.

[ Parent | on HN ]

Re:Beautiful Image Hover Effect Using Only Webkit CSS (No JS) by nirmal on Tuesday May 11, 2010 @09:57AM (#1337809)

Just so I'm not missing something, are there browsers which would support the Webkit CSS but not support DOM manipulation? Or are you concerned with people running NoScript style plugins?

Not being hostile, just want to clarify.

[ Parent | on HN ]

Re:Beautiful Image Hover Effect Using Only Webkit CSS (No JS) by NathanKP on Tuesday May 11, 2010 @10:24AM (#1337917)

Yes, NoScript is a problem. However, I was referring to other scenarios in general where a problem can be solved by just adding a <div> in HTML code. It seems more economical to me to add the <div> manually to the HTML code as in this Webkit example rather than writing a JavaScript routine to manipulate the HTML code at runtime on the client's machine as you suggested.

[ Parent | on HN ]

Re:Beautiful Image Hover Effect Using Only Webkit CSS (No JS) by rev087 on Tuesday May 11, 2010 @09:49AM (#1337784)

If you use a javascript library such as Mootools, you could add a onDomReady event, wich fires as soon as the HTML is rendered - even before the <img>. Of course that means yet more Kbs, but almost all solutions have their downsides.

Regarding the original comment, I do feel the urge...clean and easy to maintain HTML is an irresistible compulsion for me :}

[ Parent | on HN ]