Miniaturas com Hover e Link: Blogroll ou Menu de Categorias!

agosto 19, 2019


[ #18 | B E D A ] Konnichiwaa fadinhas e elfos! Como estão? Eu fiz esse estilo de link com imagem e hover para adicionar no blog. Adaptei ele faz um tempo mas vou compartilhar agora o html e css com vocês! Ele é lindo e tem um efeito muito moderno e profissional! Então chega de colocar links aleatórios adicione esse modelo e deixe tudo mais agradável para os olhos! Let's go?


Esse é o efeito:
sample47
sample47

June

Visite



➔ (O H3 se adapta a própria configuração do seu blog, caso não goste mude no código na parte .snip1356 h3)
Caso não consiga ver nessa postagem, veja no [preview aqui].
O blog de preview também tem uma área de pedidos, pode ficar a vontade e pedir um tutorial também!

Agora vamos colocar no blog! Vá em Tema, Editar HTML, aperte Alt+F  e procure por </head> , ACIMA dele cole o seguinte código:

<style type='text/css'>
@import url(https://fonts.googleapis.com/css?family=Raleway:500,700);
.snip1356 {
  font-family: &#39;Raleway&#39;, Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 130px;
  max-width: 115px;
  width: 100%;
  background: #2980b9;
  text-align: left;
  color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-size: 16px;
}
.snip1356 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.snip1356 &gt; img,
.snip1356 .image img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  max-width: 100%;
}
.snip1356 &gt; img {
  vertical-align: top;
  position: relative;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  opacity: 0.7;
}
.snip1356 .image {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.snip1356 .image img {
  position: absolute;
  top: 0;
}
.snip1356 figcaption {
  opacity: 0;
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 15px;
  z-index: 1;
}
.snip1356 h3,
.snip1356 p {
  margin: 0;
}
.snip1356 h3 {
  font-weight: 700;
  margin-bottom: 5px;
  color: white;
  text-transform: uppercase;
}
.snip1356 p {
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: 400;
}
.snip1356 .read-more {
  display: block;
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  line-height: 48px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 20px;
  color: #ffffff;
  right: 0;
  bottom: 0;
  font-weight: 500;
  position: absolute;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.snip1356 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
.snip1356:hover .read-more,
.snip1356.hover .read-more,
.snip1356:hover figcaption,
.snip1356.hover figcaption {
  opacity: 1;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.snip1356:hover .image,
.snip1356.hover .image {
  bottom: 100%;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

</style>


Pode fazer suas alterações, como por exemplo a cor do hover, procure por #2980b9 e altere na cor que quiser. Salve e vá para Layout e Adicionar um Gadget de HTML/Javascript, cole o seguinte código:

<figure class="snip1356">
  <img alt="sample47" src="https://imgur.com/156wyhx.jpg" />
  <div class="image">
<img alt="sample47" src="https://imgur.com/156wyhx.jpg" /></div>
<figcaption>
    <h3>
Sweet Magic</h3>
</figcaption><span class="read-more">
    Visite <i class="ion-android-arrow-forward"></i></span>
  <a href="https://www.blogger.com/blogger.g?blogID=6638799300028000921#"></a>
</figure>

<figure class="snip1356">
  <img alt="sample47" src="https://imgur.com/156wyhx.jpg" />
  <div class="image">
<img alt="sample47" src="https://imgur.com/156wyhx.jpg" /></div>
<figcaption>
    <h3>
June </h3>
</figcaption><span class="read-more">
    Visite <i class="ion-android-arrow-forward"></i></span>
  <a href="https://www.blogger.com/blogger.g?blogID=6638799300028000921#"></a>
</figure>

<figure class="snip1356">
  <img alt="sample47" src="https://imgur.com/156wyhx.jpg" />
  <div class="image">
<img alt="sample47" src="https://imgur.com/156wyhx.jpg" /></div>
<figcaption>
    <h3>
Sweet Magic</h3>
</figcaption><span class="read-more">
    Visite <i class="ion-android-arrow-forward"></i></span>
  <a href="https://www.blogger.com/blogger.g?blogID=6638799300028000921#"></a>
</figure>

<figure class="snip1356">
  <img alt="sample47" src="https://imgur.com/156wyhx.jpg" />
  <div class="image">
<img alt="sample47" src="https://imgur.com/156wyhx.jpg" /></div>
<figcaption>
    <h3>
Sala de Star</h3>
</figcaption><span class="read-more">
    Visite <i class="ion-android-arrow-forward"></i></span>
  <a href="https://www.blogger.com/blogger.g?blogID=6638799300028000921#"></a>
</figure>

Você vai precisar utilizar imagens com o mesmo tamanho, e imagens no tamanho de 128 x 128 pixels, hospede as imagens e cole a url delas onde ficam os links em jpeg, substitua pelas suas imagens! 

Altere também os nomes e os links ''blogger''. Salve! Prontinho!

Qual quer dúvida é só perguntar nos comentários e caso queira uma atenção especial para o seu blog, mande um e-mail! Amanhã terá mais postagens, então fique atento! Até mais! Siga o bloguinho e visite sempre! Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest 

Leia também:

19 comentários

  1. Amei o tutorial!! Realmente, fica muito bonito visualmente. To pensando em colocar uma área de blogroll no meu blog, e já vou salvar seu post pra usar futuramente.

    ResponderExcluir
    Respostas
    1. Que bom que vai usar, obrigada mesmo <3
      Quando colocar me avise, vou adorar ver o seu blog ! Kissus

      Excluir
  2. Eu tenho uma dificuldade imensa com html, obrigada pelo post!

    ResponderExcluir
    Respostas
    1. Boa sorte! Tente sempre, uma hora você vai ver que não é tão difícil! Kissus

      Excluir
  3. Eu tenho uma dificuldade imensa com html, obrigada pelo post!

    ResponderExcluir
  4. Ah que post legal.. nunca achei um post que explicasse bem como fazer, e agora eu aprendi. Irei testar no meu site pra ver se fica legal.
    Adorei a dica.

    ResponderExcluir
    Respostas
    1. Obrigadaa, fico feliz em saber que conseguiu entender pela postagem e que vai utilizar, vou adorar visitar e ver no seu blog, kissus!

      Excluir
  5. Legal o seu post, mas o meu blogue é básico e até houve um tempo em que eu fazia mil coisas, mas isso foi lá no começo. Agora eu uso apenas o que o layout me fornece e nada de html.

    bacio

    ResponderExcluir
    Respostas
    1. Entendo, carregar o blog realmente não é bom, pois fica mais devagar. Mas super encorajo dar pelo menos alguns detalhes que mostre mais profissionalismo! Quando quiser é só passar aqui <3 Kissus!

      Excluir
  6. Que maravilha de tutorial ! Eu estava louca para aprender sobre isso.
    Muito obrigada!
    Beijos
    www.anneferreirablog.com

    ResponderExcluir
  7. oi!
    Eu adoro estes tutoriais :) eu não intendo muito disso e sempre ajudam muito, fica lindo

    ResponderExcluir
    Respostas
    1. Que bom que gosta, obrigada!
      Tente adicionar no seu blog, qualquer dúvida é só falar! Kissus

      Excluir
  8. Achei muito lindinho! To querendo mudar o meu layout e acho que vou usar o código, obrigadinha por isso :)

    ResponderExcluir
    Respostas
    1. Nada! Que bom que gostou! Vai ficar lindo no seu blog, mude para uma cor que combine e prontinho <3 Eu também faço layouts caso se interesse, me chame aqui: https://web.facebook.com/jucianeddesigner/

      Excluir
  9. Adorei a dica! Fica muito legal visualmente. Vou salvar o post aqui pra utilizar o tutorial no futuro <3

    ResponderExcluir
    Respostas
    1. Obrigada, vou adorar visitar o seu blog e ver lá
      Qualquer dúvida é só falar!

      Excluir
  10. Este comentário foi removido pelo autor.

    ResponderExcluir