Edit in JSFiddle

var $filter = $('[data-filter]');
$('div.filter-options > select').on('change', function(e) {
    var filterValue = $(this).val();
    
    $filter.each(function() {
        var $self = $(this);
        
        if (filterValue == 'none') {
            $self.show();
        }else{
            if ($self.attr('data-filter') != filterValue) {
                $self.hide();
            }else{
                $self.show();
            }
        }
    });
});

<main class="container">
    <div class="row">
        <div class="col-md-12 filter-options">
            Filter:
            <select>
                <option value="none">None</option>
                <option value="my-images">My Images</option>
                <option value="other-images">Other Images</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3" data-filter="other-images">
            <figure>
                <a href="http://lorempixel.com/500/333/cats/">
                    <img src="http://lorempixel.com/500/333/cats/" />
                    <figcaption>
                        <div>
                            <h3>
                                Caption Title
                            </h3>
                            <p>
                                Caption text...
                            </p>
                        </div>
                    </figcaption>
                </a>
            </figure>
        </div>
        <div class="col-md-3" data-filter="other-images">
            <figure>
                <a href="http://lorempixel.com/500/333/transport/">
                    <img src="http://lorempixel.com/500/333/transport/" />
                    <figcaption>
                        <div>
                            <h3>
                                Caption Title
                            </h3>
                            <p>
                                Caption text...
                            </p>
                        </div>
                    </figcaption>
                </a>
            </figure>
        </div>
        <div class="col-md-3" data-filter="other-images">
            <figure>
                <a href="http://lorempixel.com/500/333/sports/">
                    <img src="http://lorempixel.com/500/333/sports/" />
                    <figcaption>
                        <div>
                            <h3>
                                Caption Title
                            </h3>
                            <p>
                                Caption text...
                            </p>
                        </div>
                    </figcaption>
                </a>
            </figure>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3" data-filter="other-images">
            <figure>
                <a href="http://lorempixel.com/500/333/city/">
                    <img src="http://lorempixel.com/500/333/city/" />
                    <figcaption>
                        <div>
                            <h3>
                                Caption Title
                            </h3>
                            <p>
                                Caption text...
                            </p>
                        </div>
                    </figcaption>
                </a>
            </figure>
        </div>
        <div class="col-md-3" data-filter="other-images">
            <figure>
                <a href="http://lorempixel.com/500/333/food/">
                    <img src="http://lorempixel.com/500/333/food/" />
                    <figcaption>
                        <div>
                            <h3>
                                Caption Title
                            </h3>
                            <p>
                                Caption text...
                            </p>
                        </div>
                    </figcaption>
                </a>
            </figure>
        </div>
        <div class="col-md-3" data-filter="my-images">
            <figure>
                <a href="http://www.dbpas.com/image/cartoon_sunset.png">
                    <img src="http://www.dbpas.com/image/cartoon_sunset.png" />
                    <figcaption>
                        <div>
                            <h3>
                                Caption Title
                            </h3>
                            <p>
                                Caption text...
                            </p>
                        </div>
                    </figcaption>
                </a>
            </figure>
        </div>
    </div>
</main>

div.filter-options {
    margin: 15px 0 15px 0;
}
figure {
    position: relative;
    line-height: 0;
    width: 100%;
    max-width: 500px;
    margin-bottom: 15px;
}
figure img {
    width: 100%;
    height: auto;
}
figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    line-height: 1em;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: all 2s ease 0s;
    -moz-transition: all 2s ease 0s;
    -ms-transition: all 2s ease 0s;
    -o-transition: all 2s ease 0s;
    transition: all 2s ease 0s;
}
figcaption:hover {
    background-color: rgba(0, 0, 0, 0);
}
figcaption:hover > div {
    color: rgba(255, 255, 255, 0);
}
figcaption > div {
    position: absolute;
    bottom: 0;
    color: rgba(255, 255, 255, 1);
    -webkit-transition: all 2s ease 0s;
    -moz-transition: all 2s ease 0s;
    -ms-transition: all 2s ease 0s;
    -o-transition: all 2s ease 0s;
    transition: all 2s ease 0s;
}