Join Join
Join

119Push Away Gallery

In this effect, we will enlarge an image of a gallery when the user clicks on it. At the same time, all the other images will be pushed away from the click, each one leaving in the direction it was already sitting. A caption will then appear under the open image, and a second click will bring the whole grid back. Let's dive in!

HTML Structure

The structure here is very simple. A small intro, then a list that contains all the images of our gallery.

<section class="mwg_effect119">
    <div class="hero">
        ...
    </div>
    <div class="list">
        ...
    </div>
</section>

Inside the list, each item holds the image we will animate and the caption that goes with it:

<div class="item">
    <img src="assets/medias/01.webp" alt="" draggable="false">
    <p class="caption">A jump into the Mediterranean</p>
</div>

We simply repeat this item as many times as we have photographs. Notice that no width or height is declared here: each image keeps its own proportions, portrait or landscape, and that is what makes the grid interesting.

One small attribute deserves a mention: draggable="false". Without it, a click that lingers a little too long becomes a native image drag, and our interaction is swallowed before it even starts.

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try our free effects.

Try it now Try it now

(No registration or credit card needed)