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

[ #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:

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