GALERIA_IMAGENS

---

🖼️ Exercício – Galeria Interativa com HTML, CSS e Animações

---

📷 1. Objetivo: Criar uma Galeria com 12 Imagens em Grade (3x4)

Desenvolver uma galeria contendo 12 imagens organizadas em uma grade de 3 colunas por 4 linhas, utilizando HTML e CSS.

---

⚙️ 2. Requisitos Técnicos

🧩 a) Tamanho das Imagens

• Cada imagem deve ter as dimensões de:
  • Largura: 150px
  • Altura: 150px

🖱️ b) Efeito Hover (Ao passar o mouse)

• Ao passar o mouse sobre qualquer imagem:
  • Deve ser aplicado um efeito de sombra (box-shadow).
  • O efeito deve possuir uma animação suave utilizando transição CSS (transition).

🔄 c) Efeito de "Virar" a Imagem ao Clicar

• Ao clicar na imagem:

  • A imagem deve girar em 3D, simulando o efeito de virar uma carta.
  • A parte de trás da imagem deverá exibir um texto curto, como:
    • Nome do local
    • Curiosidade
    • Data
    • Ou qualquer informação relevante

• Para referência, pode-se consultar o exemplo:
  Shay Howe – Flip Card Effect

---

🎨 3. Dicas de Estilo com CSS

• Utilize display: grid; para criar a estrutura da grade 3x4.
• Aplique propriedades transition e transform para criar efeitos animados.
• Use perspective para possibilitar o efeito 3D ao girar as imagens.

---

Desenvolvido por

Murilo Alves

---