#notascute

[historynerd25]

Today's artwork 😊 #babyyoda #drawing #thekidslikedit #hadtobesigned #notascute #butstillok #starwars #themandalorian #ftm https://www.instagram.com/p/B8kCpCcllpS/?igshid=1ljynxpbwrtue

[ilovelayout]

Notes Hover Cute (themes em grade)

Bom, tive a ideia de fazer este note hover durante a escola, e eu acho que ficou bem diferente, daí o nome cute, por estar fofinho. Por favor, não plageiem nem se inspirem, eu gostei muito, foi uma das únicas coisas que fiz e realmente gostei.

Demo

Para fazer, coloca no CSS:

.faixar {width:15px; height:15px; background:#cf6f9a; border-radius: 20px; padding:3px; margin-top:-20px; margin-left:90px; opacity:0; -webkit-transition-duration:.99s; position: absolute;} .faixar2 {width:15px; height:15px; background:#cf6f9a; border-radius: 20px; color: #fff; padding:3px; margin-top:-20px; margin-left:140px; opacity:0; -webkit-transition-duration:.99s; position: absolute;} .caixa:hover .faixar {opacity:1; margin-left:90px; -webkit-transition-duration:.99s; position: absolute; margin-top:0px; } .caixa:hover .faixar2 {opacity:1; margin-left:140px; -webkit-transition-duration:.99s;position: absolute; margin-top:0px; }

Então, o .faixar e .faixar2 são as bolinhas do nosso permalink, sem as imagens dentro. essas divs mostram elas antes do hover, por isso a opacity 0 e o margin-top -20px, para dar o efeito de que estão entrando. Esse margin-left vocês vão ajustar de acordo com o tamanho da box de vcs, como a minha é 250px colocar 90px ficou legal na primeira caixinha, e na segunda o 140px deu um espacinho da primeira caixa, para ficar organizado. 

OBS: Tá vendo a class .caixa:hover ? Então, você vai mudar o "caixa" pelo nome da div da sua caixa de posts, senão não vai funcionar. A distância da esquerda tem que ser a mesma tanto no hover quanto no normal.

Agora você vai em {Block:Posts}, depois vai ter a div da sua caixa, certo? Vai ser algo como "<div class='SUACAIXA'>". Cola o segunte código DEPOIS disso:

{Block:IndexPage} <div class="faixar"> <a href="{ReblogURL}" target="_blank"><img src='http://abcarrie.tumblr.com/images/note_reblog.png'></a></div> <div class='faixar2'><a target="_blank" href="{Permalink}"><img src='http://static.tumblr.com/e9dndrk/fvJmc0a3f/hearticon.png'> </a></div> {/Block:IndexPage}

E pronto! Notas hover desenvolvidas por mim, juh. Se usar/gostar dá like.