Weebly Tricks #89 - Direction-Aware Hover Effects

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.

CLICK HERE FOR LIVE DEMO

---

FILES NEEDED
How to use these files? Click Here!

---

• diaw.css
• jquery.hoverdir.js
• modernizr.custom.97074.js

---

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!