Efeito Cards

Código logo abaixo

Ranger Vermelho Saiba Mais


Líder corajoso e destemido, com traje vermelho vibrante que simboliza sua paixão pela justiça e liderança intrépida.

Ranger Azul Saiba Mais


Inteligente e estratégico, o Ranger Azul veste um traje azul cintilante que reflete sua mente afiada e habilidades tecnológicas.

Ranger Amarelo Saiba Mais


Ágil e otimista, a Ranger Amarela brilha com um traje amarelo radiante, representando sua energia contagiante e habilidades acrobáticas.

Ranger Rosa Saiba Mais


Graciosa e poderosa, a Ranger Rosa destaca-se em seu traje rosa, simbolizando sua compaixão e força feminina.

				
					*/No conteiner pai : usar a classe "container-pai", e nos demais usar "coluna", aplicar o código abaixo no conteiner pai"/

.coluna {
    overflow: hidden;
    height: 300px; /* Controle a altura do card aqui */
    transition: width 0.5s ease;
}

.coluna:hover {
    width: 100%;
}

.saiba-mais {
    display: block;
    font-size: 20px; /* Ajuste o tamanho do 'saiba mais' aqui */
    letter-spacing: 0;
    transition: 0.2s;
    color: #0330fc; /* Ajuste a cor do 'saiba mais' aqui */
    position: relative;
    top: 0px; /* Ajuste a posição do 'saiba mais' aqui */
}

.texto .elementor-image-box-description {
    opacity: 0;
    transition: 0.55s;
    transform: translateY(165px); /* Ajuste a posição dos textos aqui */
}

.texto {
    transform: translateY(165px); /* Ajuste a posição dos textos aqui */
    transition: 0.5s;
}

.coluna {
    padding: 32px; /* Ajuste o padding das colunas aqui */
}

.coluna:hover .elementor-image-box-description {
    opacity: 1;
    transition: all 0.5s 0.5s;
    transform: translateY(-60px); /* Ajuste a posição da descrição aqui */
}

.coluna:hover .texto {
    transform: translateY(0);
}

.coluna:hover .saiba-mais {
    opacity: 0;
}

.coluna::before,
.coluna::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, transparent, #000000); /* Ajuste as cores do gradiente aqui */
    width: 100%;
    height: 100%;
    transition: 0.5s;
}

.coluna::after {
    background: linear-gradient(to bottom, #000000af, #000000); /* Ajuste as cores do gradiente no hover aqui */
    opacity: 0;
}

.coluna:hover::after {
    opacity: 1;
}

.coluna * {
    z-index: 1;
}

				
			

Efeito rolagem horizontal

INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTASINSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧

INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTASINSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧

INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTASINSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧ INSCRIÇÕES ABERTAS ✧

dsfsdfdsfdsfdsf

Desenvolvo páginas de destino estratégicas que convertem visitantes em clientes, utilizando técnicas avançadas de design e otimização

DSFSDFDF

Crio artes visuais impactantes para campanhas digitais e impressas, garantindo consistência e criatividade em cada projeto.

dsfsdf

Construo sites responsivos e intuitivos, focados na experiência do usuário e na eficácia da navegação.

DCGFGFDGDFG

Ofereço consultoria especializada em design de interface e experiência do usuário para melhorar a usabilidade e a conversão em plataformas digitais.