I’ve found this nice slick effect in here – http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box-shadow.html.
Here is a copy of this – http://jsfiddle.net/cyvvilek/cL7x6/3/
I was wondering if there is any way to get this effect on hover.
Together with some CSS animation would give a nice effect, I think.
There is a heavy use of :after and :before in CSS so it cannot be #box:after:hover or anything like that 🙂
I’ve heard about possibility of nesting stuff in SASS or LESS..
Can this be done with CSS alone?
Thx
Unfortunately, pseudo elements like :after and :before cannot be transitioned yet. SASS and LESS compile down to CSS, so everything technically possible with SASS or LESS, is possible with plain CSS.
What you can do is have a seperate element (maybe div) with the top shadow and fade it in and out on hover. Alternatively you can use an image.