.elementor-kit-801{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#000000;--e-global-color-text:#959292;--e-global-color-accent:#78917B;--e-global-color-56bcff4:#FFFFFF;--e-global-color-ac06ec2:#000000;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-size:52px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-line-height:4px;--e-global-typography-primary-letter-spacing:2.2px;--e-global-typography-primary-word-spacing:2px;--e-global-typography-secondary-font-family:"Arimo";--e-global-typography-secondary-font-size:57px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:lowercase;--e-global-typography-text-font-family:"arimo";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-size:51px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-font-style:italic;--e-global-typography-accent-line-height:1px;--e-global-typography-d331cef-font-family:"Akaya Kanadaka";--e-global-typography-d331cef-font-size:2px;--e-global-typography-f6a1ed3-font-family:"Helvetica";--e-global-typography-f6a1ed3-font-size:1px;--e-global-typography-f6a1ed3-line-height:10px;--e-global-typography-eb4b73f-font-family:"Roboto";--e-global-typography-eb4b73f-font-size:91px;--e-global-typography-eb4b73f-font-weight:600;--e-global-typography-eb4b73f-text-transform:lowercase;--e-global-typography-eb4b73f-font-style:normal;--e-global-typography-eb4b73f-line-height:46px;--e-global-typography-eb4b73f-letter-spacing:4.3px;--e-global-typography-eb4b73f-word-spacing:4px;--e-global-typography-7935146-font-family:"Roboto";--e-global-typography-7935146-font-size:113px;--e-global-typography-7935146-font-weight:600;--e-global-typography-7935146-text-transform:lowercase;--e-global-typography-7935146-font-style:normal;--e-global-typography-7935146-line-height:27px;--e-global-typography-7935146-letter-spacing:6.3px;--e-global-typography-7935146-word-spacing:10px;background-color:var( --e-global-color-primary );}.elementor-kit-801 e-page-transition{background-color:#FFBC7D;}.elementor-kit-801 button,.elementor-kit-801 input[type="button"],.elementor-kit-801 input[type="submit"],.elementor-kit-801 .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );font-style:var( --e-global-typography-accent-font-style );line-height:var( --e-global-typography-accent-line-height );border-radius:0px 0px 0px 0px;padding:4px 4px 4px 4px;}.elementor-kit-801 img{opacity:1;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1110px;}.e-con{--container-max-width:1110px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-801 button,.elementor-kit-801 input[type="button"],.elementor-kit-801 input[type="submit"],.elementor-kit-801 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-801{--e-global-typography-primary-font-size:27px;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:0.9px;--e-global-typography-primary-word-spacing:0em;--e-global-typography-secondary-font-size:18px;--e-global-typography-secondary-line-height:0.9em;--e-global-typography-secondary-letter-spacing:1px;--e-global-typography-secondary-word-spacing:0em;--e-global-typography-text-font-size:12px;--e-global-typography-text-line-height:0.3em;--e-global-typography-text-letter-spacing:-1.9px;}.elementor-kit-801 button,.elementor-kit-801 input[type="button"],.elementor-kit-801 input[type="submit"],.elementor-kit-801 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Black & White to Colour Hover Effect */
.bw-hover img {
    filter: grayscale(100%);       /* Start in black & white */
    transition: filter 0.5s ease;  /* Smooth transition */
}

.bw-hover img:hover {
    filter: grayscale(0%);         /* Show full colour on hover */
}
3️⃣ Steps in Elementor
Drag an Image widget into your section.
In the Advanced → CSS Classes field, enter:

Copy code
bw-hover
Apply the CSS above.
Preview — when you hover over the image, it will fade from black & white to colour.
✅ Features
Lightweight — no JavaScript needed.
Responsive — works on all devices.
Customisable — adjust transition speed or add effects like scale().
🔹 Optional: Add Zoom Effect
If you want the image to slightly zoom in while changing colour:

Css

Copy code
.bw-hover img {
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 0.5s ease;
}

.bw-hover img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
}

}

}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'arimo';
	font-display: auto;
	src: url('arimo') format('truetype');
}
/* End Custom Fonts CSS */