Link color/size in Weebly (CSS/HTML)

Question

So I'm trying to make a little image menu on weebly. The goal is pretty simple. There are a couple of images and when you hover over them, the background fades and the caption background changes color. I've managed to do that part correctly (I think) but now the last part that is killing me, is getting the text for the link to change size and color.

Here is the code I put in the page header:

<style>


figure.figurefx{
 margin: 0;
 padding: 0;
 display: inline-block;
 position: relative;
 overflow: hidden; /* hide overflowing elements by default */
}

figure.figurefx::before, figure.figurefx::after{ /* create :before and :after pseudo elements that are initially positioned outside canvas */
 content: '';
 width: 100%;
 height: 100%;
 display: block;
 background: black;
 position: absolute;
 opacity: 0;
 top: 0;
 left 0;
 -moz-transform: translate3d(0, 0, 0); /* position elements past bottom of layout */
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 -moz-transition: all 0.5s;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}

figure.figurefx img{
 display: block;
}

figure.figurefx figcaption{
 position: absolute;
 font-family: 'Oxygen', sans-serif;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 150%
 display: block;
 color: black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: width: 100px; 
 text-align: center;
 background: black;
 padding: 5px;
 z-index: 100;
 width: 100%;
 max-height: 100%;
 overflow: hidden;
 top: 50%;
 left: 0;
 -moz-transform: translate3d(0, -50%, 0); /* position caption outside layout horizontally and centered vertically */
 -webkit-transform: translate3d(0, -50%, 0);
 transform: translate3d(0, -50%, 0);
 -moz-transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 transition: all 0.5s;

}
figure.figurefx figcaption a{
 text-decoration: none;
 text-decoration: color: black;
}


/*** Default slide down panel effect ****/
figure.figurefx:hover:after{
 opacity: 0.6;
}
figure.default:hover::before{
 -moz-transform: translate3d(0, 0, 0);
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

figure.default:hover figcaption{
 opacity: 1;
 -moz-transform: translate3d(0, -50%, 0); /* center caption */
 -webkit-transform: translate3d(0, -50%, 0);
 transform: translate3d(0, -50%, 0);
 background: white;
 /*-moz-transition: all 0.5s;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
 -moz-transition-delay: 0.5s;
 -webkit-transition-delay: 0.5s;
 transition-delay: 0.5s; */
}


</style>

<!--[if lte IE 9]>

 <style>
 /* IE9 and below specific CSS */

 figure.figurefx::before, figure.figurefx::after{
  display: none; /* hide pseudo elements, since legacy IE can't transition them */
 }

 </style>

<![endif]-->
</style>

Now the embed code for the HTML element on the website is this:

<figure class="figurefx default">
     <a href="http://www.mywebsite.com/faq.html">
        <img src="http://www.mywebsite.com/files/theme/FAQ.jpg" width="225" height="90" />
         <figcaption>
          F.A.Q 
        </a>
 </figcaption>
</figure>

I just want to get the "FAQ" on top of the image to be white with the black background, and black with the white background after hovering over it. I don't know CSS or HTML too well, so if I could get a few pointers that would be great. I looked around a lot before posting, so I would really appreciate some help! Thanks!

Answer 1

A summary of the comments as well as the final solution:

Firstly , the HTML tags are not nested correctly:

<a><figcaption></a></figcaption>

The most recently opened tag should be closed first, like so:

<a><figcaption></figcaption></a>

Secondly , the following CSS is not valid:

text-decoration: color: black;

Remove the text-decoration: bit and you'll be grand:

color: black;

Thirdly , background: black; does work but since you're only setting the colour it is better practice to use background-color:

background-color: black;

Now , to get the colours changing correctly, you have to set the default colour, for when there is no hover, by adding color: white; to figure.figurefx figcaption , and then to set the colour when the hover is active, by adding color: black; to figure.default:hover figcaption .

Finally , to get the sizing working, add font-size: 150% to the class that deals with the hover, figure.default:hover figcaption . To apply transparency to the background on hover, in the same CSS class change the value of background-color: from white to rgba(255, 255, 255, 0.7) , changing the 0.7 value to give you the desired transparency (0 = totally transparent, 1 = opaque).