Galeria de imagens com efeito

Olá e bem-vindo ao Mult-focos. Quer fazer uma galeria de imagens? Neste post vamos ver CSS Triângulo de imagens, com efeito, muito apropriado para destacar suas imagens com um visual incrível.
 Veja um demo clicando no botão abaixo ou em Result no Box de códigos.
DEMO Como adicionar em seu blog

• Copie o código CSS do Box de códigos Vá ao painel do Blogger->modelo->editar HTML->use Ctrl+F e localize]]></b:skin>
• Acima desta tag cole o código CSS 

Próximo passo

• Ir para o painel do blogger->layout Clique em Adicionar um Gadget. 
• Na janela Adicionar um gadget->HTML/JavaScript. 
• Copie o código JS abaixo e cole-o dentro da caixa de conteúdo.
• Salvar o gadget. Arraste o gadget e reposicione-o onde você quer mostrá-lo. 
• Clique no botão Salve (canto superior direito).

 OBS: Você pode usa-lo em um post também.

Configuração

• No código JS onde esta escrito(AQUI URL DA IMAGEM) coloque a URL da sua imagem.
• As imagens são de 128x128 pixels. 

Isto é tudo.

<div class='container'>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcKUfV1VRjQkce2QKKsPAGsUF4MOazLVFHsr9UKRyye5vVKaPh6jUz9TkxCVLSAg7ZPcaLnLl4BYuxgL0QlpcuBNCaN2-0xEi_FUfsiqBoci9oo9M8e0qB_cQGOqwNXTBoOuSWatlJBKUB/s128-no/cavalo.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4HtF9QSrvsjIgaLVfmemMqzR9LZ6XGIyZ945if03XI9gg8DUBbMTzJAkvZ235iD0WUVN2i-WvVxwZdWf2RLWdIOVZqUZbeQ-qw22nHW43n_PqKFVdC1SPEx6n4vGtGUxyXFxM6XNNHW-/s128-no/elefante.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnqaWilIyiTaVBGJlo7si5vrZ-T15EiJz1uGzKlboW0S8_Ao1qgKOrYpnX5zlR1iQUwPh5rWszWMMkybQtUQsxQxrmZZJlsFRB2JgKSAjuccFROz_xgid1_eV49Ar7S6wDlXZgO21kePG/s128-no/lobo.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQkrXZZHW1K0uKsgsSAptbuuDqDa0jlBniGFMgwqLMl8-ThtyxahyX0M00DbXXVBaW9jI6sga1IzAOFzZ3b_vmGP6dh6uVolPCCmNZLJiPet2xCDNLQbLuPjvfn6NidQy878zP8D3oscj/s128-no/on%C3%A7a128x128.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmjm4fuxDNC6HMqzJw5G3hxfk_Jr7w4n-AVxiO3p2i9l8NHOvWA8h-3VrhohPsYod2UNSUAQXcv_OdPKCnf-uu2OGuTaoq977AFsks4eO2PPW0uWlbmIV2_oBOceIbfDRpmR68M60aV2Tb/s128-no/puma128x128.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMEYIWf1shgW5bL8grh4Z9RlCAigTjjO_9andHZ1TQhGdSg4SfHQL9klw1y5y6z7dmFxysFN7GnEy1Xj4K9nyQ7eCYlUzq5Z8HBKc-qLg1Lb7aE5jksXQMG-_BDMp4gw4XrRepc1VDpGAP/s128-no/tigre128x128.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYK34v_g4oEtlGrHFynTpgWZ7CmTAHROqbJxQFt5iZFuEr0JFy-cG9HAyvrmsmXf5tfvGjPGORwymdRfip0YzyOAC6vug9wVMJcvmE2SsMY1f7DhS26qKg5y-UZrlkNqa3Z6Zhh8Fm8ACP/s128-no/urso128x128.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinOhd_1fzAptPVyab3gPWL5PpOmr4MKeAFWCIhGkOQ0Bsp1NbsYoy-RKSgcrZqTr5HbtsCL7R8RaWPxvZG7A26_anBqvch_L5puFPGccpLKyKpGv9t4PTTthXoeWuDDN7yY4Jg9ZJr5z6u/s128-no/zebras128x128.jpg'>
    </div>
  </div>
</div>

See the Pen CSS Triângulo de imagens com efeito by Mairink (@Oemes) on CodePen.

---

---