Box hover de categorias: Kawaii!

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

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