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.
You can adjust all of your cookie settings by navigating the tabs on the left hand side.
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.