CSS3 Portfolio Problems

index.php

<div class="container">
<div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3">
            <div id="wrap" class="text-center">
                <div class="thumbnail2">
                    <div class="thumbnail">
                        <a href="#myModal">
                            <div class="caption">
                                <!-- <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> -->
                                <!-- BEGIN MODAL HERE -->
                                    <h4>Thumbnail Headline</h4>
                                    <p>short thumbnail description</p>
                                    <!-- Button trigger modal --><br>
                                <!-- </button> -->
                                <!-- <p><a href="" class="label label-danger">Zoom</a>
                                <a href="" class="label label-default">Download</a></p> -->
                                <!-- End MODAL HERE -->
                            </div>
                        </a>
                        <img src="http://lorempixel.com/400/300/sports/4/" alt="...">
                    </div>
                    <div class="panel-footer text-center">
                        <a href="#download"><span class="glyphicon glyphicon-download"></span></a>
                        <a href="#facebook"><span class="fa fa-facebook"></span></a>
                        <a href="#twitter"><span class="fa fa-twitter"></span></a>
                        <a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="container">
            <div class="row modal-centered">
                    <div class="col-xs-12 col-md-offset-1 col-md-10 m-top-10">
                        <div class="panel panel-default">
                            <div class="panel-image">
                                <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52d09387ae003_1.JPG" class="panel-image-preview" />
                                <label for="toggle-1"></label>
                            </div>
                            <div class="panel-footer text-center">
                                <a href="#download">
                                    <span class="glyphicon glyphicon-download"></span>
                                    <span class="modal-subtext">Download</span>
                                </a>
                                <a href="#facebook">
                                    <span class="fa fa-github"></span>
                                    <span class="modal-subtext">Github</span>
                                </a>
                                <a href="#twitter">
                                    <span class="fa fa-play-circle-o"></span>
                                    <span class="modal-subtext">Live Demo</span>
                                </a>
                                <a href="#share">
                                    <span class="glyphicon glyphicon-share-alt"></span>
                                    <span class="modal-subtext">Share</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

main.css

/* =========================================================================
        Projects Section: Thumbnail Hover without Javascript
   =======================================================================*/
/*body {
 padding-top: 50px;
}*/

.thumbnail {
    position:relative;
    overflow:hidden;
    padding: 0;
    margin-bottom: 0;
}

.thumbnail2 {
    display: block;
    /*padding: 4px;*/
    margin-bottom: 20px;
    line-height: 1.428571429;
    background-color: #fff;
    /*border: 1px solid #ddd;*/
    border-radius: 4px;
    margin-bottom: 20px;
}

.caption {
    position:absolute;
    bottom:-100%;
    right:0;
    background:rgba(255, 162, 0, 0.75);
    width:100%;
    height:100%;
    padding:1%;
    text-align:center;
    color:#fff !important;
    z-index:2;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.thumbnail2:hover .caption {
    bottom:0%;
}

/* =========================================================================
                    Portfolio using Panels No JavaScrip
   =======================================================================*/

.panel-image {
    position: relative;
}
.panel-image img.panel-image-preview {
    width: 100%;
    border-radius: 4px 4px 0px 0px;
}

.panel-image label {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

.panel-heading ~ .panel-image img.panel-image-preview {
    border-radius: 0px;
}

.panel-body {
    overflow: hidden;
}

span.glyphicon, span.fa {
    margin-left: .4em;
}
/*.panel-image ~ input[type=checkbox] {
    position:absolute;
    top:- 30px;
    z-index: -1;
}

.panel-image ~ input[type=checkbox] ~ .panel-body {
    height: 0px;
    padding: 0px;
}

.panel-image ~ input[type=checkbox]:checked ~ .panel-body {
    height: auto;
    padding: 15px;
}
*/
.panel-image ~ .panel-footer a {
    padding: 0px 10px;
    font-size: 1.3em;
    color: rgb(100, 100, 100);
}

/* =========================================================================
                        Modal with blur effect like iOS
   =======================================================================*/
body.modal-open #wrap{
       -webkit-filter: blur(7px);
       -moz-filter: blur(15px);
       -o-filter: blur(15px);
       -ms-filter: blur(15px);
       filter: blur(15px);
}
.m-top-10 {
    margin-top: 10em;
}
/*.modal-backdrop {
    background: #f7f7f7;
}*/
.panel-footer a {
    color: rgb(100, 100, 100);
}

.modal-centered a {
    margin-left: 5px;
}

.modal-dialog-center { /* Edited classname 10/03/2014 */
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
}

div.alert.alert-info {
    z-index: 10;
    height: 30em;
    position: relative;
    top: 15em;
    /*width: 40em;*/
}