January 7, 2015

Weebly Tricks #89 - Direction-Aware Hover Effects

Posted by Domz at 1/07/2015

Direction Aware hover effects - Weebly


I would like to create a separate tutorial for this hover effect though you have already seen it on our Sortable Portfolio. The idea is to let the hover effect follow where your mouse is coming from. The step is basic but the output is awesome and the best of it... everybody can do it.







FILES NEEDED
How to use these files? Click Here!


FOOTER CODE
Where to place these codes? Click Here!


<link rel="stylesheet" type="text/css" href="http://mwtdatabase.weebly.com/files/theme/diaw.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://mwtdatabase.weebly.com/files/theme/jquery.hoverdir.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/modernizr.custom.97074.js"></script>
<script type="text/javascript">
$(function() {

$(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );

});
</script>

Notes:
Red text - Change with your own site address


HEADER CODE
Where to place these codes? Click Here!


<style>
.da-thumbs {
width: 910px;
height: 450px;
}
.da-thumbs li a img {
    width: 200px;
    height: 200px;
}
</style>

Notes:
Red text - The dimension of your images container.
Blue text - The size of each image.


BODY CODE
Where to place these codes? Click Here!


<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="http://www.myweeblytricks.com/">
            <img src="http://mwtdatabase.weebly.com/files/theme/diaw1.jpg" />
            <div><span>Plant trees to save our planet.</span></div>
        </a>
    </li>
</ul>

Notes:
Red text - The link if you click a photo.
Green text - Your image source.
Yellow text - Your description.

Now to add more image, simple copy the codes from <li> to </li> and paste it after the </li>.


CONCLUSION





One of the key thing that Weeblers less likely to use is the modernizr. If you're going to remove it, then the effect won't work.

For those... still don't know the 10 Capsulated Tips, I want you to read and understand it because those tips made this plugin possible.


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


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!

...

7 comments:

  1. Hello,
    I liked this hoover effect, but can not get it to work.
    I think the file modernizr.custom.97074.js is incorrect, therefore downloaded original file from original location, without the help (I've removed the link at the pictures, it is hoover effect I was looking for) See how this looks when I've uploaded everything: http://onkelole.weebly.com/hover-effekt.html

    Have you modified the original file "modernizr.custom.97074.js" and this is the reason?

    What can I have done wrong? Have you any idea?
    Thank you in advance.
    Good side, a lot of exciting tips :)

    ReplyDelete
  2. Hi Ole,

    Glad you like it. Perhaps the best solution is to add me as an editor your site. My email is domz3669@yahoo.com.ph.

    ReplyDelete
  3. Replies
    1. Ok Ole,

      To finally resolve your problem, please open this topic on the forum. Its simple.

      Delete
  4. I have to agree... Weeble is very easy to use and you can design your website limitless. You may check my website as well powered by weebly. www.callcenterscoop.weebly.com

    ReplyDelete
  5. Hey Domingo,
    I like this hover effect but could not get it done on my website. Can you please help me out? Thanks.

    ReplyDelete
    Replies
    1. Hi yusuf,

      The forum is wide open, I can assist you there.

      Delete

 

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

Home | | Privacy Policy | Top