.solid-hover {
	.image-container {
		position: relative;
		margin-bottom: 1em;
		overflow: hidden;
		
		.image-overlay-container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%; /* adjustments depends on the size of the image */
			padding: 3px 0;
			text-align: center;
			overflow: hidden;
			z-index: 1;
			-webkit-transition: all 0.7s ease;
			        transition: all 0.7s ease;

		}
		
		&.image-container-disintegrate {

			-webkit-perspective: 1500px;

			        perspective: 1500px;
  			-webkit-perspective-origin: 50% 50%;
  			        perspective-origin: 50% 50%;

			overflow: visible !important;

			.image-overlay-container {

				opacity: 0; /* note */

				-webkit-transition: all 1.5s ease-in-out;

				        transition: all 1.5s ease-in-out;

			}

			.disintegrate-container {

				position: relative; 
				width: 100%;
				max-width: 100%;
				height: auto;
				margin: 0; 
				
				padding-bottom: 66.5%; //customize this to fit your needs

				[class^="image-clip-"] {

					position: absolute;
					top: 0;
					left: 0;
					opacity: 1;
					z-index: -500;
					-webkit-transition: all 0.3s linear;
					        transition: all 0.3s linear;

				}
				
				/* disintegrate vertically (left side), image clip and delays */

				&.disintegrate-v-left,
				&.disintegrate-v-fly-up,
				&.disintegrate-v-ascend,
				&.disintegrate-v-zoom-in,
				&.disintegrate-v-flush,
				&.disintegrate-v-collapse,
				&.disintegrate-v-drop {

					.image-clip-1 {

						-webkit-clip-path: inset(0 79% 0% 0);
						        clip-path: inset(0 79% 0% 0);

					}

					.image-clip-2 {

						-webkit-clip-path: inset(0% 60% 0% 20%);

						        clip-path: inset(0% 60% 0% 20%);
						-webkit-transition-delay: 0.2s;
						        transition-delay: 0.2s;

					}

					.image-clip-3 {

						-webkit-clip-path: inset(0% 40% 0% 39%);

						        clip-path: inset(0% 40% 0% 39%);
						-webkit-transition-delay: 0.3s;
						        transition-delay: 0.3s;

					}

					.image-clip-4 {

						-webkit-clip-path: inset(0% 20% 0% 59%);

						        clip-path: inset(0% 20% 0% 59%);
						-webkit-transition-delay: 0.4s;
						        transition-delay: 0.4s;

					}

					.image-clip-5 {

						-webkit-clip-path: inset(0% 0% 0% 79%);

						        clip-path: inset(0% 0% 0% 79%);
						-webkit-transition-delay: 0.5s;
						        transition-delay: 0.5s;

					}

				}

				/* disintegrate vertically (right side), image-clip and delays */

				&.disintegrate-v-right,
				&.disintegrate-v-fly-down,
				&.disintegrate-v-descend,
				&.disintegrate-v-zoom-out,
				&.disintegrate-v-flush-clockwise {

					.image-clip-1 {

						-webkit-clip-path: inset(0 79% 0% 0);

						        clip-path: inset(0 79% 0% 0);
						-webkit-transition-delay: 0.5s;
						        transition-delay: 0.5s;

					}

					.image-clip-2 {

						-webkit-clip-path: inset(0% 60% 0% 20%);

						        clip-path: inset(0% 60% 0% 20%);
						-webkit-transition-delay: 0.4s;
						        transition-delay: 0.4s;
						

					}

					.image-clip-3 {

						-webkit-clip-path: inset(0% 40% 0% 39%);

						        clip-path: inset(0% 40% 0% 39%);
						-webkit-transition-delay: 0.3s;
						        transition-delay: 0.3s;

					}

					.image-clip-4 {

						-webkit-clip-path: inset(0% 20% 0% 59%);

						        clip-path: inset(0% 20% 0% 59%);
						-webkit-transition-delay: 0.2s;
						        transition-delay: 0.2s;

					}

					.image-clip-5 {

						-webkit-clip-path: inset(0% 0% 0% 79%);

						        clip-path: inset(0% 0% 0% 79%);

					}

				}

				/* horizontal disintegration, image clips and delays */

				&.disintegrate-h-up,
				&.disintegrate-h-fly-up,
				&.disintegrate-h-ascend,
				&.disintegrate-h-zoom-in,
				&.disintegrate-h-flush {
					
					.image-clip-1 {

						-webkit-clip-path: inset(0% 0% 79% 0%);

						        clip-path: inset(0% 0% 79% 0%);

					}

					.image-clip-2 {

						-webkit-clip-path: inset(20% 0% 60% 0%);

						        clip-path: inset(20% 0% 60% 0%);
						-webkit-transition-delay: 0.2s;
						        transition-delay: 0.2s;

					}

					.image-clip-3 {

						-webkit-clip-path: inset(39% 0% 40% 0%);

						        clip-path: inset(39% 0% 40% 0%);
						-webkit-transition-delay: 0.3s;
						        transition-delay: 0.3s;

					}

					.image-clip-4 {

						-webkit-clip-path: inset(59% 0% 20% 0%);

						        clip-path: inset(59% 0% 20% 0%);
						-webkit-transition-delay: 0.4s;
						        transition-delay: 0.4s;

					}

					.image-clip-5 {

						-webkit-clip-path: inset(79% 0% 0% 0%);

						        clip-path: inset(79% 0% 0% 0%);
						-webkit-transition-delay: 0.5s;
						        transition-delay: 0.5s;

					}
					
				}

				&.disintegrate-h-down,
				&.disintegrate-h-fly-down,
				&.disintegrate-h-descend,
				&.disintegrate-h-zoom-out,
				&.disintegrate-h-flush-clockwise,
				&.disintegrate-h-collapse,
				&.disintegrate-h-drop {
					
					.image-clip-1 {

						-webkit-clip-path: inset(0% 0% 79% 0%);

						        clip-path: inset(0% 0% 79% 0%);
						-webkit-transition-delay: 0.5s;
						        transition-delay: 0.5s;

					}

					.image-clip-2 {

						-webkit-clip-path: inset(20% 0% 60% 0%);

						        clip-path: inset(20% 0% 60% 0%);
						-webkit-transition-delay: 0.4s;
						        transition-delay: 0.4s;

					}

					.image-clip-3 {

						-webkit-clip-path: inset(39% 0% 40% 0%);

						        clip-path: inset(39% 0% 40% 0%);
						-webkit-transition-delay: 0.3s;
						        transition-delay: 0.3s;

					}

					.image-clip-4 {

						-webkit-clip-path: inset(59% 0% 20% 0%);

						        clip-path: inset(59% 0% 20% 0%);
						-webkit-transition-delay: 0.2s;
						        transition-delay: 0.2s;

					}

					.image-clip-5 {

						-webkit-clip-path: inset(79% 0% 0% 0%);

						        clip-path: inset(79% 0% 0% 0%);

					}
					
				}

			}

			&:hover {

				.image-overlay-container {

					opacity: 1;

				}

				.disintegrate-v-left {

					[class^="image-clip"] {
			
						-webkit-transform: translateX(-10%);
						        -ms-transform: translateX(-10%);
						    transform: translateX(-10%); 

					}

				}

				.disintegrate-v-right {

					[class^="image-clip"] {
			
						-webkit-transform: translateX(10%);
			
						        -ms-transform: translateX(10%);
			
						    transform: translateX(10%);

					}

				}

				.disintegrate-v-fly-up {

					[class^="image-clip"] {
			
						-webkit-transform-origin: 0% 0%;
			
						        -ms-transform-origin: 0% 0%;
			
						    transform-origin: 0% 0%;
						-webkit-transform: rotateX(150deg) rotateY(90deg) rotateZ(5deg);
						        transform: rotateX(150deg) rotateY(90deg) rotateZ(5deg);

					}

				}

				.disintegrate-v-fly-down {

					[class^="image-clip"] {
			
						-webkit-transform-origin: 100% 100%;
			
						        -ms-transform-origin: 100% 100%;
			
						    transform-origin: 100% 100%;
						-webkit-transform: rotateX(-150deg) rotateY(-90deg) rotateZ(-5deg);
						        transform: rotateX(-150deg) rotateY(-90deg) rotateZ(-5deg);

					}

				}

				.disintegrate-v-ascend,
				.disintegrate-h-ascend, {

					[class^="image-clip"] {
			
						-webkit-transform: rotateY(-10deg) translate(-15%, -15%);
								transform: rotateY(-10deg) translate(-15%, -15%);

					}

				}

				.disintegrate-v-descend,
				.disintegrate-h-descend {

					[class^="image-clip"] {
			
						-webkit-transform: rotateY(10deg) translate(15%, 15%);
			
						        transform: rotateY(10deg) translate(15%, 15%);

					}

				}

				.disintegrate-v-zoom-in,
				.disintegrate-h-zoom-in {

					[class^="image-clip"] {
						
						-webkit-transform: scale(1.25);
						
						        -ms-transform: scale(1.25);
						
						    transform: scale(1.25);

					}

				}

				.disintegrate-v-zoom-out,
				.disintegrate-h-zoom-out {

					[class^="image-clip"] {
						
						-webkit-transform: scale(0);
						
						        -ms-transform: scale(0);
						
						    transform: scale(0);

					}

				}

				.disintegrate-v-flush,
				.disintegrate-h-flush {

					[class^="image-clip"] {
						
						-webkit-transform: scale(0) rotateZ(-360deg) rotateY(90deg) rotateX(90deg);
						
						        transform: scale(0) rotateZ(-360deg) rotateY(90deg) rotateX(90deg);

					}

				}

				.disintegrate-v-flush-clockwise,
				.disintegrate-h-flush-clockwise {

					[class^="image-clip"] {
						
						-webkit-transform: scale(0) rotateZ(360deg) rotateY(-90deg) rotateX(-90deg);
						
						        transform: scale(0) rotateZ(360deg) rotateY(-90deg) rotateX(-90deg);

					}

				}

				.disintegrate-v-collapse,
				.disintegrate-h-collapse {

					[class^="image-clip"] {
							

						&:nth-child(even) {

							-webkit-transform-origin: 100% 100%;

							        -ms-transform-origin: 100% 100%;

							    transform-origin: 100% 100%;
							-webkit-transform: rotateX(90deg) rotateZ(5deg);
							        transform: rotateX(90deg) rotateZ(5deg);

						}

						&:nth-child(odd) {

							-webkit-transform-origin: 100% 100%;

							        -ms-transform-origin: 100% 100%;

							    transform-origin: 100% 100%;
							-webkit-transform: rotateX(90deg) rotateZ(-5deg);
							        transform: rotateX(90deg) rotateZ(-5deg);

						}
						
					}

				 }

				 .disintegrate-v-drop,
				 .disintegrate-h-drop {

					[class^="image-clip"] {
							

						&:nth-child(even) {

							-webkit-transform-origin: 0% 0%;

							        -ms-transform-origin: 0% 0%;

							    transform-origin: 0% 0%;
							-webkit-transform: rotateX(10deg) rotateY(15deg) rotateZ(-5deg) translateY(30%);
							        transform: rotateX(10deg) rotateY(15deg) rotateZ(-5deg) translateY(30%);

						}

						&:nth-child(odd) {

							-webkit-transform-origin: 0% 0%;

							        -ms-transform-origin: 0% 0%;

							    transform-origin: 0% 0%;
							-webkit-transform: rotateX(10deg) rotateY(-15deg) rotateZ(5deg) translateY(30%);
							        transform: rotateX(10deg) rotateY(-15deg) rotateZ(5deg) translateY(30%);

						}
						
					}

				 }

				 /* horizontal desintegration */

				.disintegrate-h-up {

					[class^="image-clip"] {
			
						-webkit-transform: translateY(-10%);
			
						        -ms-transform: translateY(-10%);
			
						    transform: translateY(-10%);

					}

				}

				.disintegrate-h-down {

					[class^="image-clip"] {
			
						-webkit-transform: translateY(10%);
			
						        -ms-transform: translateY(10%);
			
						    transform: translateY(10%);

					}

				}

				.disintegrate-h-fly-up {

					[class^="image-clip"] {
			
						-webkit-transform-origin: 0% 0%;
			
						        -ms-transform-origin: 0% 0%;
			
						    transform-origin: 0% 0%;
						-webkit-transform: rotateY(150deg) rotateX(120deg) rotateZ(5deg);
						        transform: rotateY(150deg) rotateX(120deg) rotateZ(5deg);

					}

				}

				.disintegrate-h-fly-down {

					[class^="image-clip"] {
			
						-webkit-transform-origin: 100% 100%;
			
						        -ms-transform-origin: 100% 100%;
			
						    transform-origin: 100% 100%;
						-webkit-transform: rotateY(-150deg) rotateX(-120deg) rotateZ(-5deg);
						        transform: rotateY(-150deg) rotateX(-120deg) rotateZ(-5deg);

					}

				}

				/* for disintegrate effects */

				.image-clip-1,
				.image-clip-2,
				.image-clip-3,
				.image-clip-4,
				.image-clip-5 {

					opacity: 0;

				}	

			}
		
		}
	}	
}	