How to make tags on tumblr show only on hover

tumblrtumblr-themes

Do you know how to show tags, notes, and permalink info on hover? Like if my blog shows the tags, notes, perm and such on the bottom of each post and i want to change it so it only shows on hover.

Best Answer

It depends on your theme, but you're probably gonna have to find the name of the div that contains the post info, and then add some CSS to hide that div by default and show it on hover.

For example, this is the CSS I added to my theme (right before {CustomCSS} in the theme code):

body.index .post .meta {
   opacity: 0; 
   height: 0;
}
body.index .post:hover .meta {
   opacity: 1;
   height: auto;
}

So for my theme, the container for the post info is .meta, and it shows when you hover on the div for the whole post, which is .post, but adding body.index before .post limits it to only showing on posts on my main index page, not on my individual permalink post pages.

If you want a smoother transition you can add a few lines (for compatibility with different browsers) to both of the css tags, something like this:

body.index .post .meta {
   opacity: 0; 
   height: 0;
   -moz-transition-duration: .2s;
   -webkit-transition-duration: .2s;
   transition-duration: .2s;
}
body.index .post:hover .meta {
   opacity: 1;
   height: auto;
   -moz-transition-duration: .2s;
   -webkit-transition-duration: .2s;
   transition-duration: .2s;
}

It's more helpful if you link to your theme and/or blog, so we can see the actual tags they use, but if you wanna figure it out, there's some more info on this answer as well: How to show tags on tumblr when you hover over a picture?

Related Topic