I’m trying to make it so the height of the element expands without effecting the normal flow of the document, and without using absolute positioning on the element _in the non-hover state_. Since this is a page list, there will be pages added on a regular basis.
I’m basically looking for the green line to remain unchanged.
Scratching my head over how to do this with just CSS..in the pen, I’ve settled on a negative margin to compensate for the adjusted height, but I doubt that’s the best option.
Thanks @howlermiller, I’ll definitely look into this. I’d really like to find a way that has some flexibility, as far as picture dimensions go. I think this will definitely help point me in the right direction though
Yeah, that’s a problem. You could do it with JS of course, but it would be really sweet to find a CSS solution. I’ll keep this in mind, and maybe come up with something better (if you don’t beat me to it).
Hey, looking good! You can bring the transition shading back with a pseudo element: http://cdpn.io/HbFpw
Unfortunately, as cool as the pseudo element thing is, the transition only works in Firefox and Chrome > 25 (due to this bug). I figured it was worth mentioning though, since you’re already using a lot of cutting-edge stuff.