gradient.html

<!DOCTYPE html>
<html>
<head>
    <title>Average color: Gradient</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="dist/gradient.css" />
    <script src="dist/gradient.js" async></script>
</head>
<body>
    <div class="item item_bottom">
        <div class="item__image">
            <img src="images/10.jpg" />
            <div class="item__gradient"></div>
        </div>
        <div class="item__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>

    <div class="item">
        <div class="item__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <div class="item__image">
            <img src="images/12.jpg" />
            <div class="item__gradient"></div>
        </div>
    </div>

    <div class="item item_bottom">
        <div class="item__image">
            <img src="images/7.jpg" />
            <div class="item__gradient"></div>
        </div>
        <div class="item__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>

    <div class="item">
        <div class="item__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <div class="item__image">
            <img src="images/27.jpg" />
            <div class="item__gradient"></div>
        </div>
    </div>

    <div class="item item_bottom">
        <div class="item__image">
            <img src="images/26.jpg" />
            <div class="item__gradient"></div>
        </div>
        <div class="item__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>

    <div class="item">
        <div class="item__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <div class="item__image">
            <img src="images/9.jpg" />
            <div class="item__gradient"></div>
        </div>
    </div>
</body>
</html>