Galeria de imagens com efeito

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://lh5.googleusercontent.com/-86CAYs6Dc0g/VEkuBbbL8JI/AAAAAAAAHsw/ini_gr8ADvA/s128-no/cavalo.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://lh6.googleusercontent.com/-nHtVuejChn0/VEkuYcxKs_I/AAAAAAAAHtE/F78-3J_9BY4/s128-no/elefante.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://lh4.googleusercontent.com/-EhDqv76vaks/VEkuzCTFwhI/AAAAAAAAHtY/iunQTUCuCFE/s128-no/lobo.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://lh5.googleusercontent.com/-d9vUamfZbZQ/VEkxweSLdbI/AAAAAAAAHt8/UVR1BLAA3e0/s128-no/on%C3%A7a128x128.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://lh6.googleusercontent.com/-EHqZMUArq-o/VEkx8DlFpuI/AAAAAAAAHuU/hOxUYmhJO6Q/s128-no/puma128x128.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://lh4.googleusercontent.com/-OqDSfTbylRk/VEkyGnFVtqI/AAAAAAAAHuo/mPEUCtEpEuc/s128-no/tigre128x128.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://lh3.googleusercontent.com/-UE4uJv4MHSo/VEkyRPGmQSI/AAAAAAAAHu8/PtvNcgTr3rs/s128-no/urso128x128.jpg'>
    </div>
  </div>
  <div class='wrap'>
    <div class='crop'>
      <img src='https://lh6.googleusercontent.com/-dClIWQy2rzk/VEkyaZ2ubfI/AAAAAAAAHvQ/6UtX-s0PmIU/s128-no/zebras128x128.jpg'>
    </div>
  </div>
</div>
See the Pen CSS Triângulo de imagens com efeito by Mairink (@Oemes) on CodePen.



Postado por Mairink Oemes

0 comentários:

Postar um comentário

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter