I barely understand only the very basics of css and was hoping someone can point me in the right direction.
Since wikia doesn't allow javascript I found a way to hide images using css by making it transparent until clicked on:
.spoiler img { transition: all 0s 9999999s; opacity: 0.0; filter: alpha(opacity=00); } .spoiler img:active { transition: all 0s; opacity: 1.0; filter: alpha(opacity=100);
I would like to adopt this for my character page. Normally the characters that are dead have red frames around their images. I would like that to be hidden until the click on a button. I have had a bit of success but have come across some issues I can't figure out.
Here is the template that I want to apply the css to. I have three tests of the template being used below it on the same page so that you can see the problem.
- The first test is just putting the template directly below the button and it mostly works (the area behind the name doesn't change color still)
- The second test has the template a few spaces below and it doesn't work at all.
- The third test has the template in a table, which is how I am using it on the Characters page and it doesn't work.
Here is the css that I am using for this. I know that this is not a very traditional use of css and am still very new to it. I would appreciate any help you can give.
.spoilerbox { transition: all 0s 9999999s; border-radius: 5px; background: #653F03; padding: 3px; width: 100px; position: relative; } .spoilerboxname { transition: all 0s 9999999s; position: absolute; right: 0px; bottom: 0px; font-size: x-small; font-weight: bold; color: white; padding: 0 5px; border-radius: 5px 0; background: #653F03; } .spoilerbutton:active + .spoilerbox{ transition: all 0s; border-radius: 5px; padding: 3px; width: 100px; position: relative; background:#8b0000; } .spoilerbutton:active + .spoilerboxname { transition: all 0s; position: absolute; right: 0px; bottom: 0px; font-size: x-small; font-weight: bold; color: white; padding: 0 5px; border-radius: 5px 0; background: #8b0000; }