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](http://codepen.io/alexmccabe/pen/sfFBi “cool hover”)
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 =]
@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](http://codepen.io/alexmccabe/pen/sELFA “reversed”). Basically it works on the opacity of fig caption and the span.
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.
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.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".