Bootstrap KnockoutJS list of climbing Knots

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <title>List of knots</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
        img {width: 240px; height: auto;}
        img.active {width: 400px; height: auto;}
        .container {margin-bottom: 120px;}
    </style>
</head>
<body>
    <div class="container">
        <div class="jumbotron">
            <h1>Knots</h1>
            <p>Bootstrap and KnockoutJS based list of knots with image enlarge on hover.</p>
       </div>
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Name</th>
                    <th>Link</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: items">
                <tr>
                    <td><img data-bind="attr: {src: image}, hover: isHovering, css: {active: isHovering}"></td>
                    <td data-bind="text: name"></td>
                    <td><a data-bind="text: url,  attr: {href: url}"></a></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

    <script>
        ko.bindingHandlers.hover = {
            init: function (element, valueAccessor) {
                var value = valueAccessor();
                ko.applyBindingsToNode(element, {
                    event: {
                        mouseenter: function () { value(true) },
                        mouseleave: function () { value(false) }
                    }
                });
            }
        }

        var items = [
            {
                'image': 'https://upload.wikimedia.org/wikipedia/commons/e/e6/Palstek_innen.jpg',
                'name': 'Bowline',
                'url': 'https://en.wikipedia.org/wiki/Bowline',
                'isHovering': ko.observable(false)
            },
            {
                'image': 'https://upload.wikimedia.org/wikipedia/commons/3/30/Alpine_butterfly_loop.jpg',
                'name': 'Alpine Butterfly',
                'url': 'https://en.wikipedia.org/wiki/Butterfly_loop',
                'isHovering': ko.observable(false)
            },
            {
                'image': 'https://upload.wikimedia.org/wikipedia/commons/3/39/Webeleinenstek.jpg',
                'name': 'Clove Hitch',
                'url': 'https://en.wikipedia.org/wiki/Clove_hitch',
                'isHovering': ko.observable(false)
            }
        ];

        ko.applyBindings(items);

    </script>
</body>
</html>