Images

Metro UI contains special classes for displaying images. All lightweight images styles apply to images through classes and special wrappers.

Image container

All styles to image apply if image places in the block with class .img-container. This container is fluid and are made responsive with max-width: 100% and height: auto are applied to the image so that it scales with the parent element.

                    <div class="img-container">
                        <img src="...">
                    </div>
                

Image container helpers

With image container you can use special subclasses to extend visual style for images.

.rounded

.drop-shadow

.thumbnail

.thumbnail & title

Pol. To some, a power is a heaven for meetting.

.selected

.selected

.selected

.selected

Pol. To some, a power is a heaven for meetting.

                    <div class="img-container">
                        <img src="...">
                    </div>

                    <div class="img-container rounded">
                        <img src="...">
                    </div>

                    <div class="img-container drop-shadow">
                        <img src="...">
                    </div>

                    <div class="img-container thumbnail">
                        <img src="...">
                    </div>

                    <div class="img-container thumbnail">
                        <img src="...">
                        <span class="title">
                            Pol. To some, a power is a heaven for meetting.
                        </span>
                    </div>

                    <div class="img-container selected">
                        <img src="...">
                    </div>
                

Overlay

With Metro UI you can create image with overlay and this simple and easy.

Image title

Ubi est noster nix? An unveiled form of issue is the awareness. Slice nine celeries, pork shoulder, and rosemary in a large pan over medium heat, cook for fifteen minutes and soak with some herring.

                    <div class="img-container">
                        <img data-src="holder.js/100px250">
                        <div class="image-overlay">
                            <div class="h2">Image title</div>
                            <p>
                                Ubi est noster nix? An unveiled form of issue is the awareness.
                            </p>
                        </div>
                    </div>
                

You can change overlay background color with additional color classes .op-*. Colors are defined in metro-colors.css.

                    <div class="img-container">
                        <img src="...">
                        <div class="image-overlay op-amber"></div>
                    </div>