CSS Image Split with content reveal

This is a small custom gallery using CSS transitions to split images, it is responsive but for the moment it works best with a Square aspect ratio on the images. The reason for this is to be able to use the images as content on the HTML, and not having to deal with them as backgrounds. In the near future I will be adding the option to use the images in that way, but for right now, I hope you find this helpful.

All examples share the same structure, so you only need to focus on the class names that will change the effect, you'll find that next to each example.

What you can do to the "split" element:

• - masked: Masks the floating images.
• - reverse: Reverses the direction of the animation.
• - split-y: Makes the split Vertical.
• - slide-x: Slides the images to the sides.
• - reveal: Show full images at the end.