In this short tutorial, I’ll guide you, or rather I’ll provide you with simple, yet effective information on how to setup a really simple image gallery using Flex, CSS Transitions, and a little bit of jQuery. Find below an example of this, an effective looking gallery in action. Instructions will follow.
Animation Block Description
As you can see, the gallery is quite interesting, by default each image takes 25% of the viewport, and each image is CSS centered. Upon hovering the hovered-on image size is increased to take most of the viewport, while all other images decrease in size. Simple, yet effective.
Animation Block Guide
To achieve this kind of gallery, we need to prepare 5 similarly sized images (although this is not a requirement, as CSS handles the chopping for us.
We have to put each image in a flex container and set each element’s default size to 20% (as we have 5 images here). Say, the HTML could look as follows:
And the CSS could be of the following form:
Then, what remains is the simple jQuery script. This wouldn’t be required if we could select all elements within a container but the one hovered on 🙂
This concludes our simple tutorial 🙂
