Galeria de Fotos com CSS

Olá! Nesse tutorial vamos fazer uma galeria de imagens que nem a que uso no gadget Assine; note que ao abrir o cartão, existem algumas imagens amontoadas que, ao passar o mouse sobre elas, são mostradas em tamanho maior, uma a uma. Esse efeito é obtido apenas com CSS e pude aprendê-lo no site Vagabundia.
Veja o exemplo abaixo, passando o cursor nas imagens:


Primeiro, cole esse código antes de /b:skin:

 ul.fotos {/* area geral */
    position: relative;
    float: right;
    width: 600px;
    height: 400px;
    list-style: none;
    margin: 0;
  }
  ul.fotos li {/* miniaturas de imagens */
    position: absolute;
    background: #CEC0FF;
    right: 150px;
    top: 10px;
    z-index: 0;
    width: 300px;
    height: 200px;
    box-shadow: 1px 2px 3px #bbb;
    border: 2px solid #CEC0FF;
    padding: 10px;
    outline-offset: -5px;
    outline: 1px dashed #B1A5DD;
    -moz-transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
  }
  ul.fotos li img { /* miniaturas */
    width: 100%;
    height: 100%;
    border: 2px solid #B1A5DD;
  }
/* posiciona cada imagens */
  ul.fotos li:nth-child(1) {
     margin-top: 100px;
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
  }
  ul.fotos li:nth-child(2) {
     margin-top: 0px;
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
  }
  ul.fotos li:nth-child(3) {
     margin-top: 75px;
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
  }
  ul.fotos li:nth-child(4) {
     margin-top: 50px;
    -moz-transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -o-transform: rotate(40deg);
  }
  ul.fotos li:hover {/* imagem aumenta ao passar o mouse */
     width: 600px;
     height: 500px;
     padding:20px;
     margin-left: 0px;
     margin-top: -50px;
     z-index:10;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

Basicamente o que é ideal mudar são as cores, larguras, alturas...deixei no código mini descrições para saber o que estiver mudando. Nos códigos como ul.fotos li:nth-child(1) você especifica a rotação e a posição de cada miniatura de imagem; para adicionar mais 1, é só repetir o ul.fotos li:nth-child(4), trocando o 4 por 5 e aplicando estilos de acordo com o que desejar obter.
Agora, onde quiser que apareçam as imagens, cole isso:

 <ul class="fotos">
  <li><img src="URL-DA-IMAGEM-1"/></li>
  <li><img src="URL-DA-IMAGEM-2"/></li>
  <li><img src="URL-DA-IMAGEM-3"/></li>
  <li><img src="URL-DA-IMAGEM-4"/></li>
</ul>

É isso. Espero que gostem. Bju.
Imagem: Weheartit.

3 Comments

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up