hi for your hover tags tutorial... is there a way to make them appear only when hovering over an icon?
hi there anon,you probably want to ignore the hover tags tutorial and use the ‘hover links’ one instead!
how to add ‘hover links’ ( using symbols and tooltips )
follow that to install the hover links code ( if you don’t have it already ) then all you need to do is pop the html code for tags into the ‘title’ part of your hoverlink... e.g.
{block:HasTags}★{/block:HasTags}
depending on how your theme is set up, you may need to add in extra code to style it or make sure it displays in an inline block. also something to bear in mind, is that if you use hovertags like this, people won’t actually be able to click on them, so it might be worth including a different tags section on your permalink page!
Hi G! I love your themes & I'm using your tutorial on how to make my own theme & I have one question. I was wondering if you could show us how to make over tags. I love the aesthetic of hidden tags, like the type that transition down, not just invisible, so that the whole post below moves when they are hovered on. The reason for that is when I get too many tags in one post it leaves a giant blank space between them until hovered. I hope that makes sense. - NAPS (thats me. xD)
hello naps…
here be dragons a long ass post on hover tags - and how to transition them - i’ve included a couple of different techniques as there are advantages and disadvantages to each… O_O
anywhoo… this is the end result!
read on for the ‘how to–’
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…
.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
.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!!!
which i thiiiink is what you were after nonny! so i hope this helps, and if it does, a like or reblog is always appreciated!
Hi, I have a quick question about one of your themes, in theme 13 is there a way to hide the tags? Or do one of those whole 'hover to see" type of things?
okay first, delete .tags {...} (line 326-329) and add this instead:
em alguns de seus themes, ao passar o mouse em cima dos posts as tags que estão ''escondidas'' aparecem, poderia explicar como faz ou recomendar algum tutorial?
é fácil, te ensino aqui mesmo.. ou tentar, pq eu explicando é a pior coisa do mundo k
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;}
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;}
hi there, just asking how to do hover tags? I love your theme btw
right well its actually surprisingly simple, as long as you have a div style set up for both posts and tags, which custom themes should provide anyway
firstly find the div style which dictates your tags (in my case, it's #info) and add a line saying opacity:0; (or if there is already an opacity command, just change the number to 0)
make sure you replace #post with and #info with whatever your post and tag div styles are called, as this will prob vary from theme to theme
here is how it should look when you're done
+ just a brief explanation of how this works (skip if you like) - by changing the opacity of the tags to 0 you make sure that they can’t be seen beforehand, and the second part says that when you hover over the post the attributes of the info style will be changed, in this case the opacity will become 1 (ie visible). the bit below just adjusts the speed of the transition, with four variations depending on the browser.
this can be applied to practically anything, if you want things to be changed on hover. hope this helps! :)
