Direction-Aware Hover Effect with CSS3 and jQuery

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.

Direction Aware Hover Effect

View demo Download source

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%;
}

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

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 59

Comments are closed.
  1. 1

    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.

    • 2

      Any HTML spec forbids nested anchor elements. Replace the wrapper anchor with something else.

  2. 3

    wow, this is a gr8 tutorial.
    Any way, it can be made compatible with IE? like put rollovers? help please….

  3. 5

    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;
    }

    • 6


      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};
      }

  4. 7

    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!

  5. 9

    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.

  6. 11

    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!

Comments are closed.