Box hover de categorias: Kawaii!

agosto 25, 2017


[#25 - BEDA] Konnichiwa fadinhas e elfos! Como estão? Eu dei uma desanimada, hoje fiquei tão avoada. Meio que não fiz nada e ainda me atrasei aqui, é mole? kk Mas hoje trago tutorial de css/html , tenho notado que o pessoal gostam mais, então trouxe mais um! Sabe esse hover de categorias que tem no Sweet Magic? Então, vou compartilhar com vocês uma versão mais fofa! Acho bem legal colocar eles ao invés de postagens populares, o visitante já dá de cara com os assuntos principais do blog e já clica em qual quer ver! E então? Let's Go?




Tutoriais

Ver Mais
Ele é como o exemplo acima, mas no código tem 4 deles! Você pode ficar com a quantidade que quiser. Para coloca-lo, vai precisar de apenas 1 passo, colocar o html e alterar! Super simples!

Vá em Layout + Adicionar um gadget e cole o código abaixo, na caixa, altere tudo que precisa alterar, como links, imagens e nome da categoria:

 <link href="https://fonts.googleapis.com/css?family=Cherry+Cream+Soda" rel="stylesheet"></link>
<style>
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   border: 7px dotted #EEEEEE;
   outline: 3px solid #DDDDDD;
   overflow: hidden;
   display:inline-block;
   position:relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #DDDDDD;
   -moz-box-shadow: 1px 1px 2px #DDDDDD;
   box-shadow: 1px 1px 2px #DDDDDD;
   background:url(https://i961.photobucket.com/albums/ae92/Jurishi/Backgrounds/dot02_pink.gif) repeat center center;
}
.view-four img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.view-four .mask {
   background-color: rgba(255, 231, 179, 0.3);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-four h2 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #333;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-four p {
   color: #333;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-four a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-four:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-four:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-four:hover h2,.view-four:hover p,.view-four:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
    
.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   text-align: center;
   position: relative;
   font: 18px 'Cherry Cream Soda';
   padding: 10px;
   background: #bcd7ff;
   color: #FFFFFF;
   text-shadow:1px 1px 3px #222222;
   -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   margin: 25px 0 0 0;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 10px 10px;
   font:17px century gothic;
   background: #ff96aa;
   color: #FFFFFF;
   margin-top:50px;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #FF899C;
   -moz-box-shadow: 0 0 1px #FF899C;
   box-shadow: 0 0 1px #FF899C;
}
.view a.info:hover {
   -webkit-box-shadow: 0px 3px 13px #FF899C;
   -moz-box-shadow: 0px 3px 13px #FF899C;
   box-shadow: 0px 3px 13px #FF899C;
}
.nice {
height: 200px; padding: none; width: 300px;
}
</style>

<br />
<div class="view view-four">
<img class="nice" src="http://68.media.tumblr.com/08aaf396d75c73b2701482dbe0c8cd1e/tumblr_n0ul07IOrG1tswlt0o1_500.png" />
                    <br />
<div class="mask">
<h2>
Tutoriais</h2>
<a class="info" href="https://www.blogger.com/POST URL">Ver Mais</a>
                    </div>
</div>
<div class="view view-four">
<img class="nice" src="http://68.media.tumblr.com/08aaf396d75c73b2701482dbe0c8cd1e/tumblr_n0ul07IOrG1tswlt0o1_500.png" />
                    <br />
<div class="mask">
<h2>
Pessoal</h2>
<a class="info" href="https://www.blogger.com/POST URL">Ver mais</a>
                    </div>
</div>
<div class="view view-four">
<img class="nice" src="http://68.media.tumblr.com/08aaf396d75c73b2701482dbe0c8cd1e/tumblr_n0ul07IOrG1tswlt0o1_500.png" />
                    <br />
<div class="mask">
<h2>
Lista de desejos</h2>
<a class="info" href="https://www.blogger.com/POST URL">Ver mais</a>
                    </div>
</div>
<div class="view view-four">
<img class="nice" src="http://68.media.tumblr.com/08aaf396d75c73b2701482dbe0c8cd1e/tumblr_n0ul07IOrG1tswlt0o1_500.png" />
                    <br />
<div class="mask">
<h2>
Música</h2>
<a class="info" href="https://www.blogger.com/POST URL">Ver mais</a>
                    </div>
</div>
<br /> 

Então é só salvar e prontinho! Fácil não?

Para Wordspress também funciona? Sim, mas tem que ser feito separadamente, o css e o html. O css é tudo que está dentro dos { } , é só colar em Css Adicional , já o html é todo o resto < > . Coloque ele onde quer que apareça, ou html direto, ou no próprio editor só ativar a opção 'texto' e colar. Eu ainda estou aprendendo no curso onde fica as coisas do Wordspress, mas espero que de para entender haha.

Por hoje é só! Espero que tenham gostado do post! Vou responder todos amanhã! Não esqueça que está tendo postagem todo dia! Então segue o bloguinho e visite sempre! Até mais e Kissus! Deco-mail pictograms of Heart

Resultado de imagem para bye gif molang


Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *  

Leia também:

4 comentários

  1. Olá, td bom?
    Minina, gosto mesmo de ver tutos assim ♥ Sei lá, me bate a té uma vontade de fazer um cursinho sobre ♥ (só falta o money)
    ~le eu brizanu no efeito~ Adorei isso *U* Gosto tanto dessas cosias ♥♥♥
    bjs

    Instagram | NOVO SORTEIO! | VSCO com todos os filtros! | Facetune de graça!

    ResponderExcluir
    Respostas
    1. Oii, tudo sim e você?
      Que bom! Dá pra aprender mexendo, comigo foi assim o curso foi só pra aprimorar haha . Também fiquei! kk Owwn que legal! ♥♥♥ Bjs, obrigada pela visita!

      Excluir
  2. Eu adoroooo esses tutoriais! A maioria das vezes nem faço, mas gosto de saber que existem pq me dá a louca e já começo a pensar em mudar o layout e adicionar essas belezinhas x)

    Bom domingo!
    tipsnconfessions.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gosta!! ♥ É eu percebo kk mas fico feliz que gosta desses posts, adoraria saber que ajudei quando mudar de layout! Obrigada! Kissus

      Excluir

© 2017 Sweet Magic. Re-Design: JD Design. Tecnologia do Blogger.