CATÁLOGO DE SELEÇÃO COM CSS
O código que vamos analisar neste artigo é uma implementação de um efeito de catálogo de seleção com imagens rotativas usando HTML e CSS. Esse código é responsável por criar um design de catálogo interativo com imagens que se expandem quando o usuário passa o mouse sobre elas. Vamos detalhar cada parte do código para entender como tudo funciona.
Estrutura HTML Básica
<div class="card">
<a href="#"><span class="image"><img src="img/c1.png"></span></a>
<a href="#"><span class="image"><img src="img/c2.png"></span></a>
<a href="#"><span class="image"><img src="img/c3.png"></span></a>
<a href="#"><span class="image"><img src="img/c4.png"></span></a>
</div>
A estrutura HTML consiste em um elemento div com a classe “card”, que contém quatro links a, cada um com uma imagem dentro de um span com a classe “image”. As imagens são definidas usando a tag img com o atributo src apontando para diferentes arquivos de imagem.
Estilos Globais
* {
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 parte do código define estilos globais para a página. O seletor * define margem e preenchimento zero para todos os elementos, e o box-sizing é configurado como border-box. A estilização para o corpo (body) garante que ele seja centralizado na tela e que o fundo seja de cor cinza escuro.
Estilizando o Card
.image img {
width: 100%;
height: 100%;
}
.card {
width: 421px;
height: 346px;
border-radius: 4px;
background: #212121;
display: flex;
gap: 5px;
padding: .4em;
}
Aqui, as imagens dentro das classes “image” têm largura e altura de 100%, ou seja, elas se ajustam ao tamanho do container pai. A classe “card” define o tamanho, o raio das bordas, o fundo e o espaçamento do card. O display: flex faz com que os elementos internos se comportem como flex itens, permitindo um layout flexível.
Efeito de Expansão das Imagens
.card a {
height: 100%;
flex: 1;
overflow: hidden;
border-radius: 2px;
transition: all .5s;
background: #212121;
display: flex;
justify-content: center;
align-items: center;
}
.card a:hover {
flex: 4;
}
.card a span {
min-width: 16em;
padding: 0.5em;
transform: rotate(-90deg);
transition: all 0.5s;
}
.card a:hover span {
transform: rotate(0);
}
Essa parte do código é responsável pelo efeito de expansão das imagens ao passar o mouse sobre elas. A classe “card a” define a altura, o efeito de overflow oculto, o raio das bordas, a transição suave e o alinhamento do conteúdo. Quando o mouse é colocado sobre um link a, a classe “card a:hover” faz com que o elemento se expanda usando flex: 4, criando o efeito visual.
A classe “card a span” controla a rotação e a transição da imagem dentro do span. Quando o mouse é colocado sobre o link a, o span dentro dele gira de -90 graus para 0 grau, dando a sensação de que a imagem está aparecendo.
Agradeço imensamente por dedicar seu tempo à leitura deste artigo! Espero que tenha encontrado as explicações detalhadas sobre o código CSS para criar um efeito de card com imagens rotativas enriquecedoras e esclarecedoras. A capacidade de criar interatividade e design atraente em páginas da web é essencial nos dias de hoje, e compreender como esse código funciona é um passo importante nesse processo.
