How To Add CSS Moz Fade Effects To All Links In Template

CSS moz fade effects can win the heart of any web developer. There is always a room for an extra bit of tweaks and improvements to our blog templates. Today's moz fade effects is really addition that we could make to our templates to make it look more elegant and interactive. The more the effects we use in our blogs, the more is the chance that we would engage the visitors. Every time i notice extra bit of styles and effects on various blogs/websites, i tend to never forget it. And thats what every webmasters dreams of.

moz hover effect

That their blogs never get out of the priority list of the visitors. By adding the below CSS code to your templates, you would notice a huge bump in overall beauty of your blog. Each time a person would hover (visit) a link, they would notice a fade effect that uses simple CSS fade properties.

Demo Video

Step #1 Go to your Edit HTML section OR The style.css file in WordPress

In case you're in Blogger, navigation to Dashboard >> Design >> Edit HTML and find the following code (CTRL+F).


You'll probably find this code in various sections of your template. Say you tend to find it some where in footer section code as shown below.

css fading in effect

Apply Fade Property To Any Specific Region Of Template

#footer a:visited { color: #B4B4B4; text-decoration: none; }

That is responsible for footer links visited property. That is 'what happens' when the readers moves his cursor over the links in footer. So now if you wish to add the CSS fade property to these footer links, you can simply make an extra addition to the above code as shown below:

 #footer a:visited { color: #B4B4B4; text-decoration: none; -moz-transition: all 0.2s ease-in-out 0s; }

This would make the links in footer have ease in effect delay of 0.2 seconds. You could keep on adding the above fade property to any other section of your template too.

Apply Fade Property To All Links In Template

In case you wish to see this fade effect running on your entire template, regardless of any specific region, you can find the a:visited code that is not accompanied by anything else like in the previous example of #footer a:visited.

What do you need to do?

Simply search for a:visited and mark the code that shows this link property along. That is the code which is generalized to the entire template links.Check out the picture below:

css fading in effect

Hope that was easy to follow. Leave out your queries in the comment section and ill get back to you as soon as possible.

Stay safe



AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
BloggingeHow | Making Blogging Simpler: How To Add CSS Moz Fade Effects To All Links In Template
How To Add CSS Moz Fade Effects To All Links In Template
BloggingeHow | Making Blogging Simpler
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy

Tools of the Trade