Adds a full-width Image grid with cool hover effect to Divi.

image-grid-overlay.css

.image-overlay {
	background-color:rgba(0,0,0, 0.7); 
	position:absolute; 
	height:100%; 
	width:100%; 
	opacity: 1; 
	transition:opacity 1s; 
}

.image-overlay-wrapper .et_pb_button {
  margin-bottom: 4em !important;
}


@media all and (min-width: 1025px) {
	/* Animated Overlay */
	.image-overlay-wrapper {
		height:500px; 
	}

	.image-overlay {
		background-color:rgba(0,0,0, 0.7); 
		position:absolute; 
		height:500px; 
		width:100%; 
		opacity: 0; 
		transition:opacity 1s; 
	}

	.image-overlay:hover,
	.image-overlay-wrapper:hover .image-overlay {
	  opacity: 1;
	}

	.image-overlay::before {
		content:""; 
		border-top:1px solid #fff; 
		border-bottom:1px solid #fff; 
		position:absolute; 
		top:30px; 
		right:30px; 
		bottom:30px; 
		left:30px; 
		transform:scale(0,1); 
		transition:transform .8s; 
	}

	.image-overlay-wrapper:hover .image-overlay::before {
		transform:scale(1,1); 
	}

	.image-overlay::after {
		content:""; 
		border-left:1px solid #fff; 
		border-right:1px solid #fff; 
		position:absolute; 
		top:30px; 
		right:30px; 
		bottom:30px; 
		left:30px; 
		transform:scale(1,0); 
		transition:transform .8s; 
	}

	.image-overlay-wrapper:hover .image-overlay::after {
		transform:scale(1,1); 
	}

	.image-overlay-text {
		opacity: 0; 
		z-index: 1; 
		position:absolute; 
	}

	.image-overlay-wrapper h1 {
	  transform: translateY(25%);
	  transition: .6s;
	}

	.image-overlay-wrapper:hover h1 {
	  transform: translateY(0);
	  transition: .7s;
	}

	.image-overlay-wrapper .et_pb_button {
		opacity: 0;
	}
	.image-overlay-wrapper:hover .image-overlay-text, 
	.image-overlay-wrapper:hover .et_pb_button {
		opacity: 1; 
	}
}