Forums

mikes02

http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

I want to implement this hover effect but I am getting hung up on how to reverse it so that the greyscale version is showing first and then the colored version would fade in. It seems to me that would have been the more logical way to do this, I have played around with it but I must be missing something because I can't get it working. Any ideas?

bhagavan

<ul class="catnav">
                <li class="latest-word active">
                    <a href="/web-design-blog/">Latest Word</a>
                    <ul class="sub">
                        	<li><a title="January 2011" href="http://www.sohtanaka.com/web-design/2011/01/">January 2011</a></li>
	<li><a title="October 2010" href="http://www.sohtanaka.com/web-design/2010/10/">October 2010</a></li>
	<li><a title="September 2010" href="http://www.sohtanaka.com/web-design/2010/09/">September 2010</a></li>
	<li><a title="August 2010" href="http://www.sohtanaka.com/web-design/2010/08/">August 2010</a></li>
                        <li><a href="/archives/">All »</a></li>
                    </ul>
              	</li>
                <li class="tutorials">
                    <a href="/web-design-tutorials/">Tutorials</a>
                    <ul class="sub">
                        <li><a href="/web-design/category/css-tutorials/">HTML/CSS</a></li>
                        <li><a href="/web-design/category/jquery-tutorials/">jQuery</a></li>
                        <li><a href="/web-design/category/seo-tips/">SEO Tips</a></li>
                        <li><a href="/web-design/category/web-design-tutorials/">Design</a></li>
                        <li><a href="/web-design/tag/beginner/">Beginner</a></li>
                        <li><a href="/web-design/tag/intermediate/">Intermediate</a></li>
                    </ul>
           	  </li>
                <li class="food-for-thought">
                    <a href="/food-for-thought/">Food for Thought</a>
                    <ul class="sub">
                        <li><a href="/web-design/category/web-design-advice/">Learning Advice</a></li>
                        <li><a href="/web-design/category/just-think/">Random Thoughts</a></li>                        
                    </ul>
       		  </li>
                <li class="personal">
                    <a href="/personal/">Personal</a>
                    <ul class="sub">
                        <li><a href="/web-design/category/news/">News</a></li>
                        <li><a href="/web-design/category/featured/">Featured On</a></li>
                        <li><a href="/web-design/category/this-is-sick/">This is Sick!</a></li>
                    </ul>
                </li>
                <li class="resources">
                    <a href="/web-design-resources/">Resources</a>
                    <ul class="sub">
                        <li><a href="/web-design/category/best-plugins-apps/">Useful Plugins / Apps</a></li>
                        <li><a href="/web-design/category/downloads/">Downloads</a></li>
                    </ul>
                </li>
            </ul>

Brightonmike

It's an out of date solution. Scrap the Jquery and use inner box-shadows and transitions.

treehouse : what would you like to learn today?

Forums

Reversing this hover effect?