CSS mask layer

* The structure is very simple, just a div can be, directly look at the style.

This is going from the bottom to the top, *

    div {
		width: 500px;	/ * * / wide
		height: 500px;	/* 高 */
		background: yellow;	/* Background color */
		margin: 50px auto;	/* Horizontal center */
		position: relative;	/* Relative positioning */
		overflow: hidden;	/* Overflow hide */
	}

	div::after {
		/* Create a pseudo-class */
		content: "";	/* Content is empty */	
		display: block;	/* to block element */	
		width: 500px;
		height: 500px;
		background: rgba(1.1.1.0.4);	/* The first three represent colors and the last represents transparency */	
		position: absolute;	/* * * */
		top: 500px;	/* Location */
		transition: 1s;
		/* Animation over effects */
				}

	div:hover:after {
		top: 0;
		/* Make after top 0 */ when the cursor is over the div
	}
Copy the code

The top one is from top to bottom. If it is from left to right, the code is as follows:

    div {
		width: 500px;
		height: 500px;
		background: yellow;
		margin: 50px auto;
		/* Horizontal center */
		position: relative;	/* Relative positioning */
		overflow: hidden;	/* Overflow hide */
	}

	div::after {
		/* Create a pseudo-class */
		content: "";
		display: block;	/* to block element */	
		width: 500px;
		height: 500px;
		background: rgba(1.1.1.0.4);
		position: absolute;	/* * * */
		top: 0;
		left: -500px;
		transition: 1s;
		/* Animation over effects */
	}

	div:hover:after {
		left: 0;
		/* Hover over div */
	}
Copy the code

Move the after position to the far left, and then set a mouseover effect so that when it passes the div, the left value is 0, so that it moves to the far right. The same goes for right to left and up to down.