/* 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-filterwordt 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 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
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
