The direction from which the modal layer enters and appears is determined by the mouse position.

### jQuery Plugin jquery.boxhovermodal.js

This plugin detects the direction from which the mouse enters a box when hovering over it, then makes the modal layer slide into the box from the corresponding top, bottom, left, or right direction.

#### HTML Section

A block with the class box-hover-modal contains an absolutely positioned inner block with the class box-hover-modal-m.

```html
<div class="box-hover-modal">
	<div class="box-hover-modal-con">Content</div>
	<div class="box-hover-modal-m">Overlay</div>
</div>
```

#### CSS Section

The outer block needs a position property. The inner block uses absolute positioning and is initially hidden.

```css
.box-hover-modal {
	position: relative;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	width: 200px;
	height: 200px;
	background: #aaa;
	overflow: hidden;
}
.box-hover-modal-con {
	width: 100%;
	height: 100%;
}
.box-hover-modal-m {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: crimson;
}
```

### JAVASCRIPT Section

Developed using an encapsulated object approach, with one target object and one optional parameter.

```javascript
// The target object is .box-hover-modal. The optional parameter specifies the modal layer.
$(".box-hover-modal").boxhovermodal(".box-hover-modal-m");
```