How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.
It is very Good. I've added This code in CMS that use CKEDITOR, so CKEDITOR have some process in HTML and change your code. and this changes is reason of not working this beautiful effect.
For your demo it became lik code below:(I am so sorry for this bad face post, but it is important for me,)
<section><ul class="da-thumbs" id="da-thumbs"> <li><a href="http://dribbble.com/shots/505046-Menu"><img src="images/1.jpg" /> </a> <div style="display: block; left: 0px; top: 100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/505046-Menu"><span>Menu by Simon Jensen</span></a></div> <a href="http://dribbble.com/shots/505046-Menu"> </a></li> <li><a href="http://dribbble.com/shots/504336-TN-Aquarium"><img src="images/2.jpg" /> </a> <div style="display: block; left: 0px; top: 100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/504336-TN-Aquarium"><span>TN Aquarium by Charlie Gann</span></a></div> <a href="http://dribbble.com/shots/504336-TN-Aquarium"> </a></li> <li><a href="http://dribbble.com/shots/504197-Mr-Crabs"><img src="images/3.jpg" /> </a> <div style="display: block; left: 100%; top: 0px; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/504197-Mr-Crabs"><span>Mr. Crabs by John Generalov</span></a></div> <a href="http://dribbble.com/shots/504197-Mr-Crabs"> </a></li> <li><a href="http://dribbble.com/shots/503731-Gallery-of-Mo-2-Mo-logo"><img src="images/4.jpg" /> </a> <div style="display: block; left: 0px; top: -100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/503731-Gallery-of-Mo-2-Mo-logo"><span>Gallery of Mo 2.Mo logo by Adam Campion</span></a></div> <a href="http://dribbble.com/shots/503731-Gallery-of-Mo-2-Mo-logo"> </a></li> <li><a href="http://dribbble.com/shots/503058-Ice-Cream-nom-nom"><img src="images/5.jpg" /> </a> <div style="display: block; left: 100%; top: 0px; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/503058-Ice-Cream-nom-nom"><span>Ice Cream - nom nom by Eight Hour Day</span></a></div> <a href="http://dribbble.com/shots/503058-Ice-Cream-nom-nom"> </a></li> <li><a href="http://dribbble.com/shots/502927-My-Muse"><img src="images/6.jpg" /> </a> <div style="display: block; left: 100%; top: 0px; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/502927-My-Muse"><span>My Muse by Zachary Horst</span></a></div> <a href="http://dribbble.com/shots/502927-My-Muse"> </a></li> <li><a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning"><img src="images/7.jpg" /> </a> <div style="display: block; left: 0px; top: -100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning"><span>Natalie & Justin Cleaning by Justin Younger</span></a></div> <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning"> </a></li> <li><a href="http://dribbble.com/shots/502523-App-Preview"><img src="images/8.jpg" /> </a> <div style="display: block; left: 100%; top: 0px; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/502523-App-Preview"><span>App Preview by Ryan Deshler</span></a></div> <a href="http://dribbble.com/shots/502523-App-Preview"> </a></li> <li><a href="http://dribbble.com/shots/501695-Cornwall-Map"><img src="images/9.jpg" /> </a> <div style="display: block; left: 0px; top: 100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/501695-Cornwall-Map"><span>Cornwall Map by Katharina Maria Zimmermann</span></a></div> <a href="http://dribbble.com/shots/501695-Cornwall-Map"> </a></li> <li><a href="http://dribbble.com/shots/500861-final-AD-logo"><img src="images/10.jpg" /> </a> <div><a href="http://dribbble.com/shots/500861-final-AD-logo"><span>final AD logo by Annette Diana</span></a></div> <a href="http://dribbble.com/shots/500861-final-AD-logo"> </a></li> <li><a href="http://dribbble.com/shots/500369-Land-Those-Planes"><img src="images/11.jpg" /> </a> <div style="display: block; left: 100%; top: 0px; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/500369-Land-Those-Planes"><span>Land Those Planes by Lee Ann Marcel</span></a></div> <a href="http://dribbble.com/shots/500369-Land-Those-Planes"> </a></li> <li><a href="http://dribbble.com/shots/497795-Seahorse"><img src="images/12.jpg" /> </a> <div style="display: block; left: 0px; top: -100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/497795-Seahorse"><span>Seahorse by Trevor Basset</span></a></div> <a href="http://dribbble.com/shots/497795-Seahorse"> </a></li></ul></section>
If you pay attention you will see id we change UL/LI to DIV maybe problem solve.
Hi
It is very Good. I've added This code in CMS that use CKEDITOR, so CKEDITOR have some process in HTML and change your code. and this changes is reason of not working this beautiful effect.
For your demo it became lik code below:(I am so sorry for this bad face post, but it is important for me,)
<section><ul class="da-thumbs" id="da-thumbs"> <li><a href="http://dribbble.com/shots/505046-Menu"><img src="images/1.jpg" /> </a> <div style="display: block; left: 0px; top: 100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/505046-Menu"><span>Menu by Simon Jensen</span></a></div> <a href="http://dribbble.com/shots/505046-Menu"> </a></li> <li><a href="http://dribbble.com/shots/504336-TN-Aquarium"><img src="images/2.jpg" /> </a> <div style="display: block; left: 0px; top: 100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/504336-TN-Aquarium"><span>TN Aquarium by Charlie Gann</span></a></div> <a href="http://dribbble.com/shots/504336-TN-Aquarium"> </a></li> <li><a href="http://dribbble.com/shots/504197-Mr-Crabs"><img src="images/3.jpg" /> </a> <div style="display: block; left: 100%; top: 0px; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/504197-Mr-Crabs"><span>Mr. Crabs by John Generalov</span></a></div> <a href="http://dribbble.com/shots/504197-Mr-Crabs"> </a></li> <li><a href="http://dribbble.com/shots/503731-Gallery-of-Mo-2-Mo-logo"><img src="images/4.jpg" /> </a> <div style="display: block; left: 0px; top: -100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/503731-Gallery-of-Mo-2-Mo-logo"><span>Gallery of Mo 2.Mo logo by Adam Campion</span></a></div> <a href="http://dribbble.com/shots/503731-Gallery-of-Mo-2-Mo-logo"> </a></li> <li><a href="http://dribbble.com/shots/503058-Ice-Cream-nom-nom"><img src="images/5.jpg" /> </a> <div style="display: block; left: 100%; top: 0px; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/503058-Ice-Cream-nom-nom"><span>Ice Cream - nom nom by Eight Hour Day</span></a></div> <a href="http://dribbble.com/shots/503058-Ice-Cream-nom-nom"> </a></li> <li><a href="http://dribbble.com/shots/502927-My-Muse"><img src="images/6.jpg" /> </a> <div style="display: block; left: 100%; top: 0px; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/502927-My-Muse"><span>My Muse by Zachary Horst</span></a></div> <a href="http://dribbble.com/shots/502927-My-Muse"> </a></li> <li><a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning"><img src="images/7.jpg" /> </a> <div style="display: block; left: 0px; top: -100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning"><span>Natalie & Justin Cleaning by Justin Younger</span></a></div> <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning"> </a></li> <li><a href="http://dribbble.com/shots/502523-App-Preview"><img src="images/8.jpg" /> </a> <div style="display: block; left: 100%; top: 0px; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/502523-App-Preview"><span>App Preview by Ryan Deshler</span></a></div> <a href="http://dribbble.com/shots/502523-App-Preview"> </a></li> <li><a href="http://dribbble.com/shots/501695-Cornwall-Map"><img src="images/9.jpg" /> </a> <div style="display: block; left: 0px; top: 100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/501695-Cornwall-Map"><span>Cornwall Map by Katharina Maria Zimmermann</span></a></div> <a href="http://dribbble.com/shots/501695-Cornwall-Map"> </a></li> <li><a href="http://dribbble.com/shots/500861-final-AD-logo"><img src="images/10.jpg" /> </a> <div><a href="http://dribbble.com/shots/500861-final-AD-logo"><span>final AD logo by Annette Diana</span></a></div> <a href="http://dribbble.com/shots/500861-final-AD-logo"> </a></li> <li><a href="http://dribbble.com/shots/500369-Land-Those-Planes"><img src="images/11.jpg" /> </a> <div style="display: block; left: 100%; top: 0px; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/500369-Land-Those-Planes"><span>Land Those Planes by Lee Ann Marcel</span></a></div> <a href="http://dribbble.com/shots/500369-Land-Those-Planes"> </a></li> <li><a href="http://dribbble.com/shots/497795-Seahorse"><img src="images/12.jpg" /> </a> <div style="display: block; left: 0px; top: -100%; transition: all 300ms ease 0s;"><a href="http://dribbble.com/shots/497795-Seahorse"><span>Seahorse by Trevor Basset</span></a></div> <a href="http://dribbble.com/shots/497795-Seahorse"> </a></li></ul></section>If you pay attention you will see id we change UL/LI to DIV maybe problem solve.
thanks