/*** (1)  빠른줌  ******************************/
		.effect_quick_zoom {
		  overflow: hidden;
		}	
		.effect_quick_zoom img {
		  transform-origin: 0 0;
		  transition: transform .25s, visibility .25s ease-in;
		}
		.effect_quick_zoom:hover img {
		  transform: scale(2);
		}


	/*** (2) 줌 + 회전 ******************************/
		.effect_zoom_rotate {
		  overflow: hidden;
		}	
 
		.effect_zoom_rotate img {
		  transition: transform .5s ease-in-out;
		}
		.effect_zoom_rotate:hover img {
		  transform: scale(2) rotate(25deg);
		}


	/*** (3) 느린 줌 ******************************/
		.effect_zoom_slow {
		  overflow: hidden;
		}	
		.effect_zoom_slow img {
		  transform-origin: 50% 65%;
		  transition: transform 5s, filter 3s ease-in-out;
		  filter: brightness(150%);
		}
		.effect_zoom_slow:hover img {
		  filter: brightness(100%);
		  transform: scale(3);
		}



	/*** (4) 줌인 + 밝게 ******************************/
		.effect_zoom_brightness {
		  overflow: hidden;
		}	
		.effect_zoom_brightness img {
		  transition: transform 2s, filter 1.5s ease-in-out;
		  transform-origin: center center;
		  filter: brightness(50%);
		}		
		.effect_zoom_brightness:hover img {
		  filter: brightness(100%);
		  transform: scale(1.3);
		}


	/*** (5) 수평(오른쪽 방향) 이동 줌 ******************************/
		.effect_zoom_horize {
		  overflow: hidden;
		}	
		.effect_zoom_horize img {
		  transition: transform .5s ease-in-out;
		  transform: scale(1.4);
		  transform-origin: 100% 0;
		}		
		.effect_zoom_horize:hover img {
		  transform: scale(1.5) translateX(30%);
		}

	/*** (6) 수직(상단방향) 이동 줌(수직 줌) ******************************/
	    .effect_zoom_vertical{
		  overflow: hidden; 
		}
		.effect_zoom_vertical img {
		  transition: transform .5s ease-in-out;
		  transform: scale(1.4);
		  transform-origin: 0 0;
		}		
		.effect_zoom_vertical:hover img {
		  transform: scale(1.25) translateY(-30%);
		}



	/*** (7) 선명한 줌 ******************************/
		.effect_zoom_blur {
		  overflow: hidden;
		}	
		.effect_zoom_blur img {
		  transition: transform 1s, filter 2s ease-in-out;
		  filter: blur(2px);
		  transform: scale(1.2);
		}		
		.effect_zoom_blur:hover img {
		  filter: blur(0);
		  transform: scale(1);
		}



	/*** (8) 그레이 줌--> 색깔있는 이미지로 줌인 ******************************/
	    .effect_zoom_colorize{
		  overflow: hidden;
		}
		.effect_zoom_colorize img {
		  transition: transform .5s, filter 1.5s ease-in-out; 
		}
	
		.effect_zoom_colorize img:hover {
		  filter--: grayscale(0);
		  filter: grayscale(100%);
		  transform: scale(1.5);
		}
 

 /**
  <div class="effect_zoom_colorize">
    <img src="https://i.picsum.photos/id/100/800/800.jpg?hmac=a2loVcr-8SrMJLE1eVOwuO2P0dK05kvAZ4YifobFzVA" alt="This zooms-in really well and smooth">
</div>
**/




/*  hover + Overlay colour start */
.effect_zoom_colour {
 
	overflow: hidden;
	position: relative; 
	display: inline-block;
	cursor: pointer;
}

.effect_zoom_colour .effect_zoom_colour_sub {
	height: 100%;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}



.effect_zoom_colour a.link1 {
	display: none;
	font-size: 35px;
	color: #ffffff !important;
	font-family: sans-serif;
	text-align: center;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height--: 50px;
	cursor: pointer; 
	width:100%;
	height:100%;
 
	/*text-decoration: none;*/
}

.effect_zoom_colour:hover .effect_zoom_colour_sub,
.effect_zoom_colour:focus .effect_zoom_colour_sub {
	-ms-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);

	display: flex;
   justify-content: center;
   align-items: center; 
}

 
.effect_zoom_colour:hover .effect_zoom_colour_sub:before,
.effect_zoom_colour:focus .effect_zoom_colour_sub:before {
	display: flex;
   justify-content: center;
   align-items: center; 
}

.effect_zoom_colour:hover a.link1,
.effect_zoom_colour:focus a.link1 {
	display: block;

	width:100%;
	height:100%;
}

.effect_zoom_colour .link_text{
	display: flex;
   justify-content: center;
   align-items: center;    
   flex-direction: column;
	width:100%;
	height:100%;

}


.effect_zoom_colour .in_text_box{

		width:100%;
		height:100%;
		position:absolute;
		color:#ffffff; 
		font-size:30px; 
		top:0; 
		border:7px solid blue;
		display:flex;
		flex-direction: column; 
		justify-content: center;
		align-items: center;

}

.effect_zoom_colour:hover .in_text_box{
   display:none;
}

 

 


.effect_zoom_colour .effect_zoom_colour_sub:before {
	content: "";
	display: none;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color--: rgba(52, 73, 94, 0.75);
}


.effect_zoom_colour .effect_zoom_bg0:before{
	background-color: rgba(52, 73, 94, 0);

}
 
.effect_zoom_colour .effect_zoom_bg1:before{
	background-color: rgba(52, 73, 94, 0.75);
}

/**
	<div class="effect_zoom_colour" onclick="">
		<div class="effect_zoom_colour_sub">
			<a href="#">Los Angeles</a>
		</div>
	</div>
**/
/*  hover + Overlay colour  end */