Image List

Label

Image List

<Code>

<!-- Image List -->
<div class="image-list">
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
</div>

Label

Rounded Image List

<Code>

<!-- Rounded Image List -->
<div class="image-list rounded">
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
</div>

Label

Masonry Image List

It is important that you set "column-width" style to divs with "masonry" class.
The column-width value should be greater than or equal to the width property of img (widest image on the list).

<Code>

<!-- Masonry Image List -->
<div class="image-list masonry" style="column-width: 300px;">
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_400x600.jpeg" alt="image by Neeraj Das" width="300" height="300">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_400x600.jpeg" alt="image by Neeraj Das" width="300" height="300">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_400x600.jpeg" alt="image by Neeraj Das" width="300" height="300">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_400x600.jpeg" alt="image by Neeraj Das" width="300" height="300">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_400x600.jpeg" alt="image by Neeraj Das" width="300" height="300">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_600x400.jpeg" alt="image by Neeraj Das" width="300" height="200">
        <div class="image-list-label">Label</div>
    </div>
    <div class="image-list-item">
        <img src="https://materialstyle.github.io/assets/images/flower_400x600.jpeg" alt="image by Neeraj Das" width="300" height="300">
        <div class="image-list-label">Label</div>
    </div>
</div>

Image List

On this page