how to create a css translateY on hover effect

Question

I'm looking to create a CSS hover effect that I know must be possible but I just can't work it out and was wondering if some bright spark would be able to point me in the right direction!

See this image here showing what I would like to achieve

So some text in a div above an image shows, but when you hover on the image/text div the contents move upwards in a smooth style

Would this be with a -webkit-transition translateY element?

Thanks in advance for any advice or guides that you may have! Adam

Answer 1

Just for completeness and to see the two transitions methods in comparison.

A jsfiddle where you have two examples for this hover effect. One with position: top the other with transform: translateY

There is no real difference. The translateY seems to be smoother when repeatedly rollout/rollover (Paulie_D already mentioned the performance gain in his answer above)