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!
