From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
In today’s tip we’ll show you how to create a direction-aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When we “leave” the element, the overlay will slide out to that direction, following our mouse. This will create an interesting-looking effect.
We’ll use an unordered list for the thumbnails and the description overlays:
<ul id="da-thumbs" class="da-thumbs"> <li> <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning"> <img src="images/7.jpg" /> <div><span>Natalie & Justin Cleaning by Justin Younger</span></div> </a> </li> <li> <!-- ... --> </li> <!-- ... --> </ul>
The list items will be floating left and have a relative positioning because we will make the description overlay absolute:
.da-thumbs li { float: left; margin: 5px; background: #fff; padding: 8px; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .da-thumbs li a, .da-thumbs li a img { display: block; position: relative; } .da-thumbs li a { overflow: hidden; } .da-thumbs li a div { position: absolute; background: rgba(75,75,75,0.7); width: 100%; height: 100%; }
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
What we will do is the following: depending on the place we are entering with the mouse, we’ll apply the respective “from” style which will set the correct initial position of the overlay. Then we will apply the transition and then we add the final state style, so that the overlay slides in. When we leave the element, we will again apply the respective “from” style (although now we are actually sliding out) and remove the previous final state style.
So, the heart of our little plugin is the following part:
this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) { var $el = $( this ), $hoverElem = $el.find( 'div' ), direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ), styleCSS = self._getStyle( direction ); if( event.type === 'mouseenter' ) { $hoverElem.hide().css( styleCSS.from ); clearTimeout( self.tmhover ); self.tmhover = setTimeout( function() { $hoverElem.show( 0, function() { var $el = $( this ); if( self.support ) { $el.css( 'transition', self.transitionProp ); } self._applyAnimation( $el, styleCSS.to, self.options.speed ); } ); }, self.options.hoverDelay ); } else { if( self.support ) { $hoverElem.css( 'transition', self.transitionProp ); } clearTimeout( self.tmhover ); self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed ); } } );
We basically bind the ‘mouseenter’ and ‘mouseleave’ event to the list item and with the function _getDir we’ll get the direction we are moving in or out (imagine the “detection” area for each direction as a rectangle divided into four triangles).
You’ll see that in the second demo we’ve added a little delay so that we don’t have much animations going on when we move the mouse from an extreme corner to another one.
I hope you enjoyed this little effect and find it useful!
If CSS transitions are not supported the animation will fallback to the jQuery animate
Maybe sound inappropriate but this is SICK!
Fresh design and amazing idea for an online portfolio
Hi theodore! We actually got inspired by an existing portfolio where a second image is used instead of a description:
Colorz | Creative Digital Agency
I think with an overlay it seems a bit more fluid ๐
Thanks a lot and cheers, ML
Amazing, i like it ๐
As always, this website amazes me with these high-quality tutorials. This is great, guys, thanks a lot! ๐
Amazing.
wooaaahhh so cool! nice hover effect! another cool tutorial hehe.. ^_^
Neat one. :3
I wish you wrote it a week ago.
Would save me a bunch of work.
This was very interesting. I love the effect. It is a little lagged at times, but otherwise effective.
You are awesome, you come up with so cool effects just love it !!!
Just what I needed thanks!
Damm Mary, im in love with u ๐ u always come up with so good idea’s ๐ ๐
WOW…that’s jumpy..jumpy.
ck ck ck \m/
First off this is a excellent tutorial, great work on this Mary.
This might be a very dumb question, but what does the “_”s mean before self?
Hi Chris, thanks a lot! That’s just a convention ๐ Cheers, ML
Wow, simply amazing
That is pretty awesome.
Awesome. You Rocks!
It’s interacting with Quicksand (quicksand is blocking this hover effect),
Is there a way to integrate both of ’em?
Thanks.
Awesome work!!
Hello Mary,
Very nice tutorial, I’ve learnt something new today. Please do more like this!
Keep up the good work:)
Mary, you’re awesome ! Nice effect, well explained… ! Is there a way to make it work with :hover AND :focus statement (Accessibility purpose) ?
Really love this effect.
Hi, I work for Colorz | Creative Digital Agency ๐
I really liked the way you recreated this effect !
mouseenter and mouseleave allow a lot of cool things that we will publish later ๐
Very nice effect ! Thanks for sharing ๐
It reminds me this effect http://jsfiddle.net/kizu/zfUyN/??????????????????????? which is a 100% CSS solution but add extra markup.
Hello, I really like this effect, but it’s not working in IE, is to make it work in IE?
thank you.
I’m having a little trouble adapting the script to a existing markup that differs a little from the example one, what parts are the important ones that I need to modify for this to work in the script?
Wow es realmente asombroso, eres genial, gran trabajo. รxitos!
Fabulous.
Very nice effect!
However, I can’t figure how to center it in my 100% width div (i.e: If i want 6 pictures, 4 pictures on the first line, the oters 2 on the second line stay on the left ๐ )
Thanks anyway! you’re great!
Can’t wait to give it a try!
From the design perspective I love this demo.
BUT, from the usability point of view, it does feel like the mouse/stylus has ‘stuck’. It’s a small point, but one that non-designer-users might find annoying.
I have been using the same interaction on my site. It has received some good responses.
Hi Jared,
it looks really nice and I think it’s even better with an opaque background! The first time I saw it on Colorz, I really loved it because it’s such a fresh and non-boring effect ๐
Well, I have tried implementing this trick. I see the sliding effect only in Safari. What have I done wrong? I am shocked that I don’t see the effects in FireFox. I had little hope for IE.
I have tried changing the transition css to include transition-duration with and without “all.”
Looks great! I did something similar for http://lippincott.com/ last year, except with mine the overlay fades out on mouseout (per client request). Looks like we used the same code from stackoverflow for the really hard math part, too. ๐
Really interesting
Sweet choice of images for the example!
Thanks for the great tutorial. Was wondering if this will work with lightbox?
Would it be possible to use images in place of the divs with the description?….can I put images inside that div?
Very nice effect! But with a Lightbox (Fancybox ??)
Thanks, thats so cool. i like it very much. ๐
You are gr8
I really love this plugin. With some tweaking, it feels really nice and tight. Thank you so much!
I am having problems with performance, though. Safari for OS X runs it perfectly in all situations, but FIrefox is struggling when I implement it to my site (local). The (local) demo page is fine, though. It might have something to do with the fact that the gallery ‘s are responsive… what do you reckon?
thank you for this tutorial
Any way I can add some links to that black sliding box?
Something like:
<a href=”http://dribbble.com/shots/502538-Natalie-Justin-Cleaning” rel=”nofollow”>
<a href=”#” rel=”nofollow”>Item-1</a>
<a href=”#” rel=”nofollow”>Item-2</a>
<a href=”#” rel=”nofollow”>Item-3</a>
</a>
<!– … –>
<!– … –>
And the menu items will slide in within the black box.
Any HTML spec forbids nested anchor elements. Replace the wrapper anchor with something else.
wow, this is a gr8 tutorial.
Any way, it can be made compatible with IE? like put rollovers? help please….
Is there any way to make this design responsive?
Thanks!
Nevermind, just change this in the css to add max-width:
.da-thumbs {
list-style: none;
max-width: 984px;
max-height: 600px;
position: relative;
margin: 20px auto;
padding: 0;
}
I have hover on my website, which shows CAPTION on hover, its simple CCS,
But How can make my Hover Direction Aware like this?
here is my code on my site for it:
.box{
float:left;
width:235px;
height:167px;
overflow:hidden;
margin:5px;
position:relative;
background-color:#000000;
vertical-align:middle;
padding:-5px 0px 0px 0px;
}
.box-caption{
width:220px;
height:167px;
overflow:hidden;
position:absolute;
left:0px;
top:0px;
z-index:99;
text-indent:-2000px;
}
.box-caption-text{
color:#ffff00;
width:220px;
height:167px;
overflow:hidden;
position:absolute;
left:0px;
top:0px;
z-index:95;
font-size:12px;
line-height:16px;
background-color:transparent;
filter:alpha(opacity=0);
padding:0px 15px;
opacity:0;
display: inline-block;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.box:hover .box-caption{
display: inline-block;
background-color:transparent;
}
.box:hover .box-caption-text{
opacity:.85;
filter:alpha(opacity=85);
background-color:{color:Accent};
}
Hello
Interesting effect, now I’m trying to perform all the animations by using jquery animate function to make it IE compatible.
Moreover, according to the HTML5 specification, tag a cannot contain any block element, like div. It should be replaced by span in this example.
Greets an keep up the good work!
damn neat! i hope i can figure out how this works on my website…
hi. this is a really interesting effect! congratulations! i’m trying to implement it on my site but with an inverted movement. make the black box and text disappear when hovering.. but it is not working: when i say “.container li a div” to get “top:0px”, the motion stops working.. i did modify javascript to make the inverted movement, but modifying css will crash logic! did anyone tried this modification? If someone can help, i will really appreciate. Thank you.
Hey! so cool!
how can i implement this on a table ?
This is so cool but I am having a little trouble implementing it because in firebug I am getting an error that reads: “TypeError: this.$el is undefined”. Does anyone happen to know why??
Thanks in advance!
Hi, i was facing this problem, update your jQuery library to 1.7.2.
Love this tutorial! You always have to good stuff.