Vitrine Interativa de Cards com CSS

Neste post, vamos explorar e explicar um código HTML e CSS que resulta em uma vitrine interativa de cards com efeitos de transição suaves. O código cria uma disposição de cartões que reagem a interações do usuário, dando uma sensação de movimento e profundidade. Vamos analisar cada parte do código para entender como isso é alcançado.

Estrutura HTML

O código HTML define uma estrutura básica para a vitrine de cards. Ele consiste em uma estrutura <div class="main"> que contém quatro elementos <div class="card">, cada um identificado por um id único (c1, c2, c3 e c4). Cada card contém uma imagem dentro de um elemento <img>, referenciando arquivos de imagem.

<!DOCTYPE html>
<html lang="ptbr">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css" >
        <title>Vitrine de Cards</title>
    </head>
    <body>
        <div class="main">
            <div class="card" id="c1"><img src="img/capa4.png"></div>
            <div class="card" id="c2"><img src="img/capa2.png"></div>
            <div class="card" id="c3"><img src="img/capa3.png"></div>
            <div class="card" id="c4"><img src="img/capa1.png"></div>
        </div>
    </body>
</html>

Estilizando com CSS

O CSS é responsável por dar estilo aos elementos HTML e definir as animações de transição. Vamos explorar as principais partes do código CSS:

Reset de Estilos e Layout

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: rgb(37, 36, 36);
}

Essa seção define um reset de estilos para remover margens e preenchimentos padrão dos elementos. Além disso, centraliza o conteúdo verticalmente e aplica um fundo cinza escuro ao corpo.

Estilizando a Vitrine e os Cards

.main {
    display: grid;
    height: 50vmax;
    place-items: center;
}

.card {
    width: 190px;
    height: 254px;
    background: rgba(211, 211, 211, 0.199);
    position: absolute;
    transition: .3s ease-in-out;
    cursor: pointer;
    box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 0.3);
}

.card img{
    width: 100%;
}

A classe .main é definida como um grid com alinhamento central. Isso é usado para posicionar os cards na tela. A classe .card estiliza cada cartão com uma largura, altura e sombra. Além disso, a propriedade transition define uma transição de 0.3 segundos com uma função de aceleração suave. A imagem dentro de cada card é ajustada para ocupar 100% da largura do card.

Efeitos de Transição ao Passar o Mouse

.main:hover #c1 {
    transform: translateX(-100px) rotate(-40deg);
}

.main:hover #c2 {
    transform: translateX(-50px) rotate(-30deg);
}

.main:hover #c3 {
    transform: translateX(0) rotate(-20deg);
}

.main:hover #c4 {
    transform: translateX(50px) rotate(-10deg);
}

#c1:hover {
    transform: translateX(-150px) rotate(0deg) !important;
}

#c2:hover {
    transform: translateX(-100px) rotate(0deg) !important;
}

#c3:hover {
    transform: translateX(-50px) rotate(0deg) !important;
}

#c4:hover {
    transform: translateX(50px) rotate(0deg) !important;
}

Essa é a parte mais interessante do código. Quando o usuário passa o mouse sobre a seção .main, os cards reagem de forma individual com transições de rotação e translação. Isso cria uma sensação de movimento quando o usuário interage com a vitrine. Além disso, quando um card é diretamente focado (passando o mouse sobre um card específico), ele retorna à posição original com uma rotação de 0 graus.

Conclusão

Este post explorou um código HTML e CSS que cria uma vitrine interativa de cards com efeitos de transição suaves. A combinação de estilos e animações CSS permite que os cards reajam de maneira interessante às interações do usuário, criando uma experiência visual cativante. Esse tipo de abordagem pode ser útil para destacar produtos, projetos ou qualquer tipo de conteúdo em uma página web.