You may use this code: On unlimited personal or client projects As part of websites you design
You may not: Resell or redistribute the code as-is Claim the code as your own creation
This text reveal section is fully customisable, no coding knowledge required!
To add your own images and customise the carousel, double click on the design itself so that the code box appears.
CHANGE THE FONT
Simply replace:
font-family: 'NAME OF THE FONT ON YOUR SHOWIT ACCOUNT';
with the name of your chosen font. If you're using a custom font in Showit, make sure the font is already uploaded to your Showit and use its exact font-family name.
CHANGE THE ALIGNMENT
Adjust:
text-align: center;
to:
text-align: left; text-align: right;
or keep it centered.
CHANGE THE TEXT SIZE
for desktop: font-size: 42px;
and for mobile:
@media (max-width: 768px) { font-size: 14px; }
Simply replace the numbers with your preferred sizes.
CHANGE THE COLOURS
Inactive (light) text:
color: rgba(45, 20, 28, 0.18);
Highlighted text:
.text-reveal span.active { color: #2d141c; }
Replace these values with any HEX or RGB colour you'd like.
ADJUST THE ANIMATION SPEED
The reveal speed can be customised by changing the transition duration:
transition: color 0.35s ease;
Use a smaller number for a snappier effect or a larger number for a slower, more elegant reveal.