A small tutorial about creating slide in CSS image captions effect, using CSS and html5.
Beautiful slide in CSS image captions effect
Actually why we would like to do something like this? Perhaps saving space in a layout. Perhaps the captions themselves are a distraction in a specific design and it’s cleaner to only reveal them conditionally. Or just to have nice effect added to web project. Just try.
The figure element wraps everything and is our basic building block. The empowering concepts start here. The figure will need to have position: relative; so we can absolutely position the caption exactly where we want it and not have it take up any additional space.
We also need overflow: hidden; so as we do our sliding, the caption disappears outside the boundary of the figure.