I think you want something like this:
.buttons-container:hover .tx-icon-button { // not sure if this is the right selector, see below
opacity: 0.2;
}
.tx-icon-button {
opacity: 0.2; // you might not want this
}
.tx-icon-button:hover {
opacity: 1;
}
I can’t tell on which element you are triggering the hover class to show the icons. Are you doing that via JS? I can’t locate anything in the css. CSS would be the lighter option.
I’m working on a Tumblr theme but can’t seem to figure out how to hide the iframe controls behind an icon. Currently, this is my CSS:
.tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
.tmblr-iframe{
white-space: nowrap;
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
opacity: .2;
transition: .4s ease-in-out;
transform: scale(0.7,0.7);
transform-origin: right top;
}
.tmblr-iframe:hover {opacity: 1;}
So I have them being shown on hover (well, the opacity increases at least) but I was wondering how you can hide them behind something? I’ve seen it used a lot, like with an icon font. I’ve searched around on Google a ton but that hasn’t helped. I know an old thememaker on Tumblr had a code for this, but they’re deactivated so it can no longer be used unfortunately.
Can you link to your tumblr? I think this is not quite right
sure, it’s
OK so do you want to actually change the default icons that tumblr is showing here? Like put your own over the top, hide the original ones but still use the same click functionality. Or do you want to animate the opacity of the current icons on display? I think they are outside of your template, although that means styling is still possible.
no, I have the icons styled to my liking, what I’m trying to do is hide them before they’re hovered on. obviously that’s easy enough to do with the code I already have so the dilemma is that I need an icon or something there to indicate you’ll see the controls on hover. here’s a picture if that would help:
OK, so you could have an icon to suggest there are other hidden icons, and when you hover on that item (like the top menu bar, the icons can animate to opacity 0.2 or what have you. Then when you hover over the individual icon the opacity can animate to 1. The issue you have is once you hover over the top banner, and then hover over the icon the top banner hover state is removed so the other icons will fade back to 0. You might want to look at a click toggle handler. A bit like the footer of this theme: Ach, I can’t find it now. I will try and dig a bit more.
Where is the css for the header?
@noahsczerny I am always interested, if you are keen on collecting reputation points I would post your solution here as an answer and we can vote on it. Might be nice to see the finished product also.