Image blending options in CSS

                            <div class="imgcontainer">
		<div class="img_block"> 
				
			
			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="normal image">

				</div>
				<h2>mix-blend-mode: normal;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="multiply image">

				</div>
				<h2>mix-blend-mode: multiply;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="screen image">

				</div>
				<h2>mix-blend-mode: screen;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="overlay image">

				</div>
				<h2>mix-blend-mode: overlay;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="darken image">

				</div>
				<h2>mix-blend-mode: darken;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="lighten image">

				</div>
				<h2>mix-blend-mode: lighten;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="color-dodge image">

				</div>
				<h2>mix-blend-mode: color-dodge;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="color-burn image">

				</div>
				<h2>mix-blend-mode: color-burn;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="hard-light image">

				</div>
				<h2>mix-blend-mode: hard-light;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="soft-light image">

				</div>
				<h2>mix-blend-mode: soft-light;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="difference image">

				</div>
				<h2>mix-blend-mode: difference;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="exclusion image">

				</div>
				<h2>mix-blend-mode: exclusion;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="hue image">

				</div>
				<h2>mix-blend-mode: hue;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="saturation image">

				</div>
				<h2>mix-blend-mode: saturation;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="color image">

				</div>
				<h2>mix-blend-mode: color;</h2> 
			</div>

			<div>
				<div class="image_box"> 
					<img src="https://exevor.com/public/uploads/files/old-indian-bus1622978923_a7143f8f10fbb8185266.jpeg" class="luminosity image">

				</div>
				<h2>mix-blend-mode: luminosity;</h2> 
			</div>

		</div>
	</div>
                        

                            *{
			font-family: 'poppins';
		}
		body{
			margin: 0;
			background: blueviolet;
		}
		.imgcontainer{
			display: flex;
			width: 100%;
			height: 100vh;
		}
		.imgcontainer .image_box{
			margin: auto;
		}
		.normal{
			mix-blend-mode: normal;
		}
		.multiply{
			mix-blend-mode: multiply;
		}
		.screen{
			mix-blend-mode: screen;
		}
		.overlay{
			mix-blend-mode: overlay;
		}
		.darken{
			mix-blend-mode: darken;
		}
		.lighten{
			mix-blend-mode: lighten;
		}
		.color-dodge{
			mix-blend-mode: color-dodge;
		}
		.color-burn{
			mix-blend-mode: color-burn;
		}
		.hard-light{
			mix-blend-mode: hard-light;
		}
		.soft-light{
			mix-blend-mode: soft-light;
		}
		.difference{
			mix-blend-mode: difference;
		}
		.exclusion{
			mix-blend-mode: exclusion;
		}
		.hue{
			mix-blend-mode: hue;
		}
		.saturation{
			mix-blend-mode: saturation;
		}
		.color{
			mix-blend-mode: color;
		}
		.luminosity{
			mix-blend-mode: luminosity;
		}

		.image{
			width: 510px;
			height: 360px;
			object-fit: contain;
		}

		.image_box{
			background: blueviolet;
		}

		.img_block{
			margin: auto; text-align: center;
			padding: 100px 0;
		}

		.img_block h2{
			color: white;
		}

		.image{
			border-radius: 50px;
		}