Link Nudging To Animate Images Using CSS3

link-nudgingMany bloggers make the mistake of not fully customizing their links and images. In fact, customizing the two can help you stand out from the competition! However, rather than using some JavaScript to enhance our blogs, which increases loading time and is not accessible to users who disable JavaScript, we are going to use pure CSS3 to let your links and images swing from left to right and vice versa! Let's get further into it shall we? Take a look at this demo:

 

Live Demo

 

Adding Link Nudging Effect To Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for ]]></b:skin>
  4. Just above it paste the following code

/*--- MBT Link Nudging Effect ---*/

.mbt-nudge  {
-moz-transition: all 0.4s ease-out;  
-o-transition: all 0.4s ease-out;  
-webkit-transition: all 0.4s ease-out;  
-ms-transition: all 0.4s ease-out;  
transition: all 0.4s ease-out;  
}
.mbt-nudge:hover  {
margin-left: 25px;
padding-left: 5px;
}

 

Edit the bolded values to increase or decrease the amount of swinging.   

5. Save your template and done!

 

How it works?

Whenever you wish to implement this effect, simply add the following code in Edit HTML mode of your Post Editor

For Link Nudging use this code:

<a href="ADD URL HERE" class="mbt-nudge">ADD TEXT HERE</a>

  • Replace ADD URL HERE with your link like http://xyz.com
  • Replace ADD TEXT HERE with the text that will display the link

For Image Nudging use this:

<img src="IMAGE LINK HERE" border="0" alt="Image Description hereclass="mbt-nudge" />

Make these changes:

  • Replace IMAGE LINK HERE with the Image URL of the pic
  • Replace Image Description here with Image name or description. Optional

 

Take a look at your blogs and see the difference!  Here are some other tutorials which also offer some customization which might be of interest to you:

Anims


About the Guest Author:

Anims is freelance web designer and enjoys playing around with and learning coding in his free time. He likes to write about Web Technologies such as HTML, CSS and SEO. He is a valuable MBT contributor.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

1 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. nice one, but im looking for the zoom effect link...

    i hope you will make the tutorial

    ReplyDelete