https://palermo-huila.gov.co/SiteAssets/V3/Componentes/image_blur/imagen_blur.js

1/* NOTE:  vamos a generar un script para dar un estilo diferentes a los banner de las de las noticias o de la informacion que que queremos*/
2
3// funcion principal effe para que las funciones no se mezclen con otras
4export function appImgageBlur(iElemento, heigth) {
5	const elementoP = document.querySelector(iElemento);
6	const imgs = elementoP.querySelectorAll('img');
7	bucleImage(imgs, heigth);
8}
9
10function bucleImage(imgs, heigth) {
11	imgs.forEach((img) => {
12		img.classList.add('!object-contain');
13
14		let srcImg = img.src;
15		let contentPadreImg = img.parentElement;
16
17		contentPadreImg.classList.add('blur-cover-img');
18
19		// Creamos dinámicamente el pseudo-elemento before
20		let beforeElement = document.createElement('div');
21		beforeElement.style.position = 'absolute';
22		beforeElement.style.inset = '0';
23		beforeElement.style.backgroundImage = `url(${srcImg})`;
24		beforeElement.style.backgroundSize = 'cover';
25		beforeElement.style.filter = 'blur(10px)';
26		beforeElement.style.transform = 'scale(1.1)';
27		beforeElement.style.backgroundPosition = 'center';
28		beforeElement.style.zIndex = '1';
29
30		if (heigth != null) {
31			beforeElement.style.height = `${heigth}px`;
32			contentPadreImg.height = `${heigth}px`;
33		}
34		contentPadreImg.prepend(beforeElement);
35	});
36}
37
38try {
39	appImgageBlur('#ctl00_PlaceHolderNoticias_g_f707792d_c0ed_4db7_a92f_4530843fbdfe_ctl00_contentSlider');
40	appImgageBlur('#ctl00_PlaceHolderPresentacion_g_6c43ebf2_48a5_4361_b910_e161b22dd1a0');
41	appImgageBlur('#ctl00_PlaceHolderDestacados_g_fe6255fd_f082_4bb8_b9c7_cdec5ca6c625_ctl00_contantDestacados', 300);
42} catch (error) {
43	console.log('error blur homes');
44}