Direction Aware Hover Effect with CSS3 And jQuery

Posted By : Rajan Rawat | 03-Apr-2018

jquery

First things are how we will create a direction-aware hover effect with the help of CSS and jQuery.

Now, what is direction-aware hover effect it is the technique of mechanism to slide an overlay in a direction where we move the mouse as the mouse move the hover effect moves in that direction?

Today we will see how we will create a direction-aware hover effect with the use of CSS and jQuery. The plan makes a little overlay slide on the thumbnails in the direction where the mouse comes in and comes out the effect will move. when we leave the thumbnails or element, irrespective of that element the overlay will slide out. By this, we will create the new good looking hover effect.

Here we will use an unordered list to make thumbnails and the overlay

Natalie & Justin Cleaning by Justin Youngers

we are making the absolute description overlay and the list item will be floating left relative to that element

                .thumbs li {
	float: left;
	margin: 5px;
	background: #fff;
	padding: 8px;
	position: relative;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.thumbs li a,
.thumbs li a img {
	display: block;
	position: relative;
}
.thumbs li a {
	overflow: hidden;
}
.thumbs li a div {
	position: absolute;
	background: rgba(75,75,75,0.7);
	width: 100%;
	height: 100%;
}

now we will do the following things: entering the place with the mouse depending on, we will apply style respective to which initial position of an overlay is set. After that, we will apply the transition and after that, we will apply the final state style, so the overlay will slide in. On leaving the element, we will also apply some style respective to the from and after that removes the final state.

JS code for that will be given below

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