Need a little help with hover actions – namely revealing text in an aside, using HTML/CSS

[angryjenkins]

Hello, all! First post!

So if you check out my profile or my website at all you’ll see I am teaching myself coding and design for the web. I am about three months in now and am looking to add more HTML and CSS goodness and a blog to my site before diving into JQuery and JavaScript.

[Here’s a Pen for reference.](http://codepen.io/angryjenkins/pen/lahjs “Here’s a Pen of what I’m working on, … “)

To explain, I have set up a grid with 4 squares I plan to use as navigation (images will be replaced). They are grayscale until hovered – then there’s a grayscale transition, rotation and a morph to a circle. Looks pretty cool.

What I’m trying to do is have a description fade in under the squares as each one is hovered. I tried toying with figures and figcaptions but found it difficult to separate them, so I made an aside with spans containing the information.

The Pen has some horrid syntax in it, I know, but if possible I am looking to make these spans fade in and out with only HTML/CSS. I’d also be curious about the JavaScript solution, but I’m an extreme noob with that so be gentle. Should I keep the asides and spans or would figcaptions work better for what I’m going for?

Thanks in advance for the help!

[Paulie_D]

Not sure if you need the aside but it depends on what you are shooting for.

Here’s a quick interpretation. http://codepen.io/Paulie-D/pen/ckfnp

[angryjenkins]

This should suit my needs wonderfully, thanks @Paulie_D. In my head I was seeing all of the descriptions display UNDER the grid, but having them under each square also makes a lot of sense and seems easier to code. My option seems to require a bit more JS and other things I’m not up to yet.

I will incorporate this, Thanks!

[Author]

Posts