Captionify examples

Selecting all images within a tag

Diner in the night

With data-link (caption shows)

Cherry blossom neighbourhood

No data-link (caption shows)

Fisherman's boat

No data-link (caption shows)

No alt, no data-link (no caption)

Selecting images with a class within a tag with an id

Cherry blossom neighbourhood

Class with data-link (caption shows)

Diner in the night

No class with data-link (no caption)

Diner in the night

Class with no data-link (caption shows)

Datacaption = true while selecting container with a class

Diner in the night

Data-caption with data-link (caption with link shows)

Cherry blossom neighbourhood - dataCaption

Data-caption, no data-link (caption shows)

Diner in the night

No data-caption with data-link (no caption)

Diner in the night

No data-caption with no data-link (no caption)

Diner in the night

Data-caption, no data-link (caption shows)

Inheriting styles

Diner in the night

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui velit mollitia minus voluptatibus assumenda necessitatibus quasi expedita voluptate laudantium a, nemo unde, ad, minima esse quam impedit totam quidem, nobis!

Diner in the night

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus exercitationem, eaque officiis magnam rerum ex, odio vero, eligendi, consequuntur quasi placeat labore. Blanditiis maiores, nostrum iste provident ipsa non laudantium!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A doloremque voluptate, unde inventore pariatur voluptas laudantium rem, alias dolor ab beatae ut fuga debitis ex perferendis! Molestiae est laudantium praesentium!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus non veniam maiores deserunt dicta eligendi, rerum quae! Cupiditate enim aut tempore suscipit dolor quis facere est at, laborum illo dolore.

Diner in the night

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quis aliquam fugiat consequuntur soluta. Sed reprehenderit hic dignissimos ab, asperiores, commodi eos fugit aliquam esse impedit molestiae aspernatur est distinctio?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum dicta repellat reprehenderit, unde suscipit perferendis, laudantium soluta provident dolore accusantium eos laborum quos a fuga vero voluptas libero rem magnam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias suscipit quas temporibus officiis explicabo quisquam cum asperiores, dicta ab provident deserunt repellendus perferendis iusto nostrum consectetur ratione maxime alias distinctio.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo totam deserunt enim expedita debitis excepturi ipsa, atque numquam nostrum, explicabo reiciendis vero beatae ducimus minus tenetur voluptas inventore voluptatum eos.

Explicitly stated width attribute

Diner in the night

Data-caption with data-link (caption with link shows)

Diner in the night

Data-caption, no data-link (caption shows)

No data-caption with data-link (no caption)

Mode = bottom

Diner in the night

Data-caption with data-link (caption with link shows)

Diner in the night

Data-caption, no data-link (caption shows)

No images

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi minus sed nam quo architecto praesentium vero accusamus, fugit ab, fugiat possimus suscipit. Commodi nisi autem ipsum numquam, dicta nostrum enim.