/* Blur Glass effect1 */
.ct-blur-glass1 {
backdrop-filter: blur(40px) ;
-webkit-backdrop-filter: blur(40px);
}

Blur glass effect

/* Brighteness Glass effect1 */
.ct-bright-glass1 {
backdrop-filter: brightness(30%);
-webkit-backdrop-filter: brightness(30%);
}

Brightness glass effect

/* Blur + brightness effect1 */
.ct-blur-bright-effect1 {
backdrop-filter: blur(10px) brightness(90%);
-webkit-backdrop-filter: blur(10px) brightness(90%);
}

Blur + Bright effect

  • De standaard backdrop-filter wordt opgepikt door moderne browsers (zoals Firefox, Edge, nieuwere Chrome).

  • De -webkit- versie is nodig voor Safari en enkele oudere browsers.

Zonder die prefix zou het effect bijvoorbeeld op iPhones/Safari niet werken.

parallax

CSS Class: ct-hover-box

.ct-hover-box:hover {
transform: translateY(-5px);
z-index: 1; /* Dit zorgt ervoor dat de container altijd boven andere elementen komt */
}

.ct-hover-box p {
color: var(–theme-palette-color-1); /* oorspronkelijke kleur */
transition: color 0.3s ease;
}

.ct-hover-box:hover p {
color: var(–theme-palette-color-3); /* kleur op hover, bijvoorbeeld rood */
}

Lorum Ipsum

Duis et tellus

Donec vulputate

Sed posuere

Aenean

Aenean

Container opacity

CSS code

.blok1 {
opacity: 0.3;
}

.blok2 {
opacity: 0.8;
}

CSS Classes: blok1

CSS Classes: blok2