@paulie_d, yeah I tried it but the figcaptions are an odd one to work with. I am gonna keep working on it, and see what I can come up with. But it only took me a few minutes doing it this way.
I updated the reverse that you asked for with CSS comments, so that you can hopefully understand what is happening. It really is very simple, it just looks like a lot.
Paulie_D, hmm odd the figcaptions seem to be playing nice for you, but when I tried with it, they seemed to sit way off from the left and top and had to use minus numbers to get them to line up...Thanks =]
DeTodo, I would take Paulie_D's code for use, but, notice the image isn't centered.
Here is the general idea but please bear in mind that improvement can always be made.
See, you've wrapped in a div which isn't really necessary as a figure is just a div with a 'specific' function and so acts the same.
So, once I've defined the width & height I just set a positioning context (relative).
Then, since the figcaption is inside the figure, I can apply absolute positioning (top:0) and it's automatically aligned. Granted you have to make it the same size as the image but having set specific dimensions on the figure and overflow:hidden it won't matter.
Then set the opacity to '0' as you did and transition that on hover.
You can make sure that the cursor can see through the figcaption to the underlying link by using the 'pointer-events' property and so you don't need to link the figcaption text at all.
Whew.
Is it perfect? Nope, and we're not exactly using the figure element in the way it's supposed to be used but you could replace the figure & figcaption with divs and it would still work..you'd just need a couple of extra classes.
Once more thing...I'm wondering if it wouldn't be possible to avoid setting image sizes specifically if we could use the transition/transform:scale property.
Paulie_D, you are a star. I don't actually have a use for this, I did it because I could, but you have bettered me. I knew it could be, but thank you =]
So I spent some time refining your code Paulie_D and now the only size you set is the figure. Using the (old) flexbox syntax to get the figcaption to sit dead center, otherwise you have to change the padding value on the figcaption h3.
DeTodo, if you want to use this code, it might be better. A note about the flexbox syntax though, it is deprecated, but all browsers support it. The newer syntax differs, but only Chrome supports it.
The text doesn't center on the hover. A possible fix is to apply padding-top. The way you applied the background image prevented changing the value of top to anything other than 0.
EDIT: Reread your post above. I guess my Firefox doesn't respect the "old flexbox syntax" haha.
pmac627, ooh I had no idea that Firefox no longer supports the old syntax. Thank you for pointing that out! It's odd they would remove that, and then not add support for the new syntax.
I seen a similar effect that used jQuery and thought I would see if I could make it in CSS only.
So here it is
The HTML could probably be improved upon, and the CSS might be able to be condensed, but it only took me a few minutes. Hope you like it =]
Thanks for sharing.
Just wondered if it would be possible to reverse this effect so that the figcaption is shown first and then on hover it's not?
Thanks.
Yep, that's easy enough.
I was wondering if it could be done without the unsemantic span though.
I would have thought that a lot of the styling on that could be applied to the fig caption.
@Paulie_D How would this be done?
Sorry I've had a look and I'm completely lost.
Thanks.
@paulie_d, yeah I tried it but the figcaptions are an odd one to work with. I am gonna keep working on it, and see what I can come up with. But it only took me a few minutes doing it this way.
DeTodo Here is the reverse effect. Basically it works on the opacity of fig caption and the span.
thank you @alexmccabe
Going to try make this work on my site
I'd love to see it when it's done, and if you get stuck send me a tweet @alexwmccabe
Cheers.
I'm going to try implement it here
http://www.detodo.co.uk
Still trying to work out the process in my head, but I'll most probably be taking you up on your offer for help. Very kind of you.
Thanks.
Here's where I am without the span or the extra link.
http://codepen.io/Paulie-D/pen/teKiB
I'm sure there is a lot that can still be done.
I updated the reverse that you asked for with CSS comments, so that you can hopefully understand what is happening. It really is very simple, it just looks like a lot.
Paulie_D, hmm odd the figcaptions seem to be playing nice for you, but when I tried with it, they seemed to sit way off from the left and top and had to use minus numbers to get them to line up...Thanks =]
DeTodo, I would take Paulie_D's code for use, but, notice the image isn't centered.
Here is the general idea but please bear in mind that improvement can always be made.
See, you've wrapped in a div which isn't really necessary as a figure is just a div with a 'specific' function and so acts the same.
So, once I've defined the width & height I just set a positioning context (relative).
Then, since the figcaption is inside the figure, I can apply absolute positioning (top:0) and it's automatically aligned. Granted you have to make it the same size as the image but having set specific dimensions on the figure and overflow:hidden it won't matter.
Then set the opacity to '0' as you did and transition that on hover.
You can make sure that the cursor can see through the figcaption to the underlying link by using the 'pointer-events' property and so you don't need to link the figcaption text at all.
Whew.
Is it perfect? Nope, and we're not exactly using the figure element in the way it's supposed to be used but you could replace the figure & figcaption with divs and it would still work..you'd just need a couple of extra classes.
Once more thing...I'm wondering if it wouldn't be possible to avoid setting image sizes specifically if we could use the transition/transform:scale property.
Hmmm.
Paulie_D, you are a star. I don't actually have a use for this, I did it because I could, but you have bettered me. I knew it could be, but thank you =]
Thank you both. :)
Just went through the link and it's very well explained. Thank you so much.
So I spent some time refining your code Paulie_D and now the only size you set is the figure. Using the (old) flexbox syntax to get the figcaption to sit dead center, otherwise you have to change the padding value on the figcaption h3.
Here it is!
DeTodo, if you want to use this code, it might be better. A note about the flexbox syntax though, it is deprecated, but all browsers support it. The newer syntax differs, but only Chrome supports it.
The text doesn't center on the hover. A possible fix is to apply
padding-top. The way you applied the background image prevented changing the value of top to anything other than 0.EDIT: Reread your post above. I guess my Firefox doesn't respect the "old flexbox syntax" haha.
pmac627, ooh I had no idea that Firefox no longer supports the old syntax. Thank you for pointing that out! It's odd they would remove that, and then not add support for the new syntax.