January 10, 2014

Weebly Tricks #5 - Photo Fade Effect on Mouse Hover

Posted by Domingo Tambasacan at 1/10/2014

Adding Photo Fade Effects to Weebly



Yet again, here is another easy tutorial to modify your photos. This code will make your photos fade as their default state and as your mouse pointer come near to it the photo will reveal its full content. This feature is helpful in emphasizing single photo beyond others. Thus, I recommend this if you are using photos as categories with a linking site on it.







Reminders:
We will not use drag and drop for photos here.

Ok we begin with these very easy steps:

1. Download the gradualfader.js to this LINK. Once you found the file on the site just right click on it and choose “save link as”.
2. Go to Weebly > Design > Edit CSS/ HTML > Add new files > add now the file you just downloaded and also the photos you are going to use. Remember the name of the photos.

3. If you are done uploading, go to the <head> section. (help for editing <head> here)

4. Now paste the following code.

<script type="text/javascript" src="http://theweeblytricks.weebly.com/files/theme/gradualfader.js">

/***********************************************
* Gradual Element Fader- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

Change the bold text with your website address and hit save.

5. To insert an image with this effect you must do it using the “embed code” tool. Now drag one and use ANY of these sample code for your guideline:

Image only:

<img src=" http://theweeblytricks.weebly.com/files/theme/crying.gif" class="gradualfader" />
Image with link:
<a href="http://www.dynamicdrive.com" class="anotherclass gradualfader"><img src=" http://theweeblytricks.weebly.com/files/theme/crying.gif" /></a>
Change the following:

-Red marked text for your website address.
-Green marked text for the name of the photo. (It must be complete)
-Blue marked text is the target link when a photo is clicked.

Let me know if you like it guys!!

Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top