#hover tags

okay…

standard hover tags…

here’s my standard tags css -

the usual three sections of tags ( general style and posision ) - the tags a ( for the link style ) and tags a:hover ( for the hover style ).

and here are my tags on my posts…

let’s get the hover effect in first!

you need to change the opacity to 0 for your tags and add in an extra section of css to make sure that when your posts are hovered over, they will display…

.tags {    line-height:130%;    text-align:left;    font-size:9px;    opacity:0;}  

and the hover instruction -

.posts:hover .tags{    opacity:1;    -webkit-transition: all 0.7s ease;    transition: all 0.7s ease;    -moz-transition: all 0.7s ease;    -o-transition: all 0.7s ease;}

**make sure to change the word ‘posts’ to whatever class or div id your posts are - could be ‘entries’ or ‘post’ - etc!

anywhoo - now i have hover tags…

so now to get around the ‘blank gap’ for long tags… 

method 1 - hover tags with no set height or transition;

ADVANTAGE - takes into account any length of tags.DISADVANTAGE - no transition if you don’t set a tag height

the first method is to change the ‘height’ of the tags.  so we add in a ‘height:0px’ to the tags css and a ‘height:auto’ to the .posts:hover .tags

.tags {    height:0px;    line-height:130%;    text-align:left;    font-size:9px;    opacity:0;}  

.posts:hover .tags{    height:auto;    opacity:1;    -webkit-transition: all 0.7s ease;    transition: all 0.7s ease;    -moz-transition: all 0.7s ease;    -o-transition: all 0.7s ease;}

you can see from the demo that the post elongates to the right height to display my tags - but there’s no real ‘transition’.  the posts ‘jump’ down when tags display.

method 2 - hover tags with set height and transition;

ADVANTAGE - smooth display transitionDISADVANTAGE - doesn’t take into account the length of the tags

all we need to do here is add in a height to the hover command…

.posts:hover .tags{    height:20px;    opacity:1;    -webkit-transition: all 0.7s ease;    transition: all 0.7s ease;    -moz-transition: all 0.7s ease;    -o-transition: all 0.7s ease;}

and we have a lovely ‘slide’ transition!  BUT - what happens when you have longer tags!?

they overflow the height that you set… D: – so you can compromise and set a large height, but this might look a bit strange on posts with shorter tags!

yes - you can add in an overflow here… which means that your tags will keep within the height you set - but you’ll get an additional scroll box… which is kinda… not what you want really?

method 3 - using max-height settings ( or - probably the best solution! )

ADVANTAGE - smooth display transitions, takes into account any length of tagsDISADVANTAGE - eh, none i can think of…

so how to get it to work?  well the answer is not that difficult - you cannot transition from height:0 to height:auto without that jump… but what you can do is transition from max-height:0 to another max-height setting!  this will take into account long and short tags!

all we do here is change our height in tags to max height;

.tags {    max-height:0px;    line-height:130%;    text-align:left;    font-size:9px;    opacity:0;     -webkit-transition: all 0.7s ease;    transition: all 0.7s ease;    -moz-transition: all 0.7s ease;    -o-transition: all 0.7s ease;}    

and the same for our hover… ( just set a large max-height - 300px should be plenty!? )

.posts:hover .tags{    opacity:1;    max-height:300px;    -webkit-transition: all 0.7s ease;    transition: all 0.7s ease;    -moz-transition: all 0.7s ease;    -o-transition: all 0.7s ease;}  

this is our end result!!!

Primeiro, tente achar um “post container” do seu blog. É como se fose o que segura os posts, no caso alguns themes provavelmente só deve ter “posts” ou algo relacionado, mas isso tem que ter. Você encontra onde começa {block:Posts}. Vai ter vários nomes diferentes div ou class. Tipo no meu assim:

{block:Posts}

De qualquer forma, pegue o nome do que tiver o seu. O meu tem dois porque PostsContainer é como se estivesse debaixo dos Posts, como uma camada (?) ou algo assim e isso faz que quando eu passo o mouse, todos os posts aparecem as tags e não só o selecionado. Mas se usar só Posts, faz mal não, só vai aparecer tag no post selecionado.

Muito bem, agora tu vai ter que subir e criar algo mais ou menos assim (se for

você usa apenas um ponto antes, e se for

você usa #):

.postscontainer:hover .tags {filter: alpha(opacity = 100);opacity:100;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}

Vá nas suas .tags e add isso:

.tags {-webkit-transition:0.7s ease;position:absolute;opacity:0;}

Prontinho. Claro que você pode ter que adicionar margin-top nos dois, pra tipo ficar sincronizado. Ex: Se usa -1px no Hover, então tu usa -1px nas tags também. Sério, ainda parece estar confuso que até eu ficaria perdida no que eu expliquei ksjhajksha mas pode voltar aqui se precisar de ajuda. E fora do anon se quiser, respondo privado hun.

Se seu theme tem os nomes diferentes, é a mesma coisa, por exemplo:

.themeposts:hover #poststags {filter: alpha(opacity = 100);opacity:100;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}