CSS Directional Hover without using JavaScript

#css #html #mouseover #directional

CSS Directional Hover without using JavaScript

This is CSS hover effect from all directions like when you hover from left side of the element, the slide(hover effect) comes from left side. Same way to all other sides top, right, bottom. Its a directional hover effect from all four sides of element.

First lets create a CSS grid.

Create a parent div with id '#grid-plane'. Also Create another parent div inside 'grid-plane' with class name '.holder'. And lets create four child divs with class names .bottom, .left, .right, .top and add spans inside every element.

Now, copy paste the parent div '.holder' to 15 times so that we get a grid system. (5x4 rows, columns).

Now, lets create CSS. '#grid-plane' and '.holder'.

Output:

Lets style the left, top, right, bottom divs.

Assign width and height to spans with black background with opacity 0.7.

Assign positions. We are moving spans out of '.holder' div initially. They overlay on 'holder' div when we hover on the 'holder' div in their directions.

Lets create ':before' to left, top, right, bottom divs. Initially we are hiding them with opacity 0. This is a square box element and we are rotating it to 45deg and making it look like triangle. We are going to hover on these ':before' elements and we are faking it by hiding it to opacity 0 as if it doesn't exist.

This is the main part. Lets create hovers to left, top, right, bottom divs. Now this is very important. If we hover on 'holder' div from any one of the direction like:- If we hover from 'left' side then the span(the black background element with opacity 0.7) will slide from left side(animating) and cover the 'holder' div and also this below code ':before' element will be just behind the span element which is scaled to width and height to 215px and will translateX to -38% which covers the whole 'holder' div. This will block some hover conflicts from rest of the elements(.right, .top, .bottom) divs. These (.right, .top, .bottom) divs hover will not work properly because we have covered the entire 'holder' div with '.left:before' by scaling it to 215px. Same thing happens when we hover from right direction, avoids few conflicts from rest of the divs(.left, .top, .bottom). We can completely avoid all conflicts but we still need to code little more.

Remove all divs and keep only .left div inside '.holder' like below screenshot and comment overflow: hidden in '.holder' in CSS to view 'left:before' and span(black background) in browser.

This is how it looks if we have all 4 divs in 'holder' div and comment overflow: hidden in CSS.

Now revert back, undo the above statements. (add all 'holder' parent divs back and uncomment overflow: hidden). Just like 15 times we added 'holder' parent divs earlier.

Lets create hover to the left, top, right bottom divs. Hover effect which covers(overlays) the 'holder' div with the spans(black background with opacity 0.7).

Lets create animations to the spans of left, top, right, bottom divs.

Now we can avoid all hover conflicts by adding below codes.
Now lets hide other divs when we hover 'holder' div from any direction. Lets assume we are hovering from bottom direction. Then we have to hide below divs which are (.left, .right, .top divs). Just hiding all next element siblings.

If we hover from left direction. Through below code we are hiding rest of the divs. Hiding below two next element siblings and hiding first div(previousElement sibling) which is above the .left div using (has) class method.

If we hover from right direction. Through below code we are hiding rest of the divs. Hiding below one next element sibling and hiding first two divs(.bottom, .left[previousElement siblings]) which is above the .right div using (has) class method.

If we hover from top direction. Through below code we are hiding rest of the divs. Hiding above all previousElement siblings(.bottom, .left, .right) using (has) class method.