.container h1{
    text-align: center;
  }
  .gallery {
    
    float: left;
    margin: 10px;
    background: #ffffff;
    padding: 10px;
    box-sizing: border-box;
    
    
}

.gallery img {
width: 100%;
height: 300px;

}



.gallery h2 {
  text-align: center;
  background-color: #e0e0e0;
  color: #104da3;
  font-size: 25px;
}

.gallery .title-cap{
  margin-top: -50px;
  position: relative;
}


/* my code */


.pic{max-width:300px;
    max-height:200px;
    position:relative;
    overflow:hidden;
    margin:10px;
    display:inline-block;
-webkit-animation:anima 2s;
-moz-animation:anima 2s;
-o-animation:anima 2s;
-ms-animation:anima 2s;
animation:anima 2s;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-o-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;
}

.pic:hover .pic-image{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1)
}

a,a:hover,.pic .pic-image,.pic-caption,.pic:hover .pic-caption,.pic:hover img{
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
            -ms-transition:all 0.5s ease;
            transition:all 0.5s ease
        }


.pic:hover .bottom-to-top,.pic:hover .top-to-bottom,.pic:hover .left-to-right,.pic:hover .right-to-left,.pic:hover .rotate-in,
.pic:hover .rotate-out,.pic:hover .open-up,.pic:hover .open-down,.pic:hover .open-left,
.pic:hover .open-right,.pic:hover .come-left,
.pic:hover .come-right{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
            filter:alpha(opacity=100);
            -moz-opacity:1;
            -khtml-opacity:1;
            opacity:1;
            -webkit-user-select:none;
            -moz-user-select:none;
            -o-user-select:none;
            -ms-user-select:none;
            user-select:none;
            -webkit-touch-callout:none;
            -moz-touch-callout:none;
            -o-touch-callout:none;
            -ms-touch-callout:none;
            touch-callout:none;
            -webkit-tap-highlight-color:transparent;
            -moz-tap-highlight-color:transparent;
            -o-tap-highlight-color:transparent;
            -ms-tap-highlight-color:transparent;
            tap-highlight-color:transparent
        }

        .left-to-right{top:0;right:50%}.pic:hover .left-to-right{right:0;top:0}
        @media screen and (max-width: 560px){.pic{max-width:400px;max-height:300px;display:block;-webkit-animation:none;
            -moz-animation:none;-o-animation:none;-ms-animation:none;animation:none;margin:10px auto}} 

            .pic-image{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);
                -ms-transform:scale(1.1);transform:scale(1.1)}

                .pic-caption{cursor:pointer;position:absolute;width:100%;height:100%;
                    background:rgba(44,62,80,0.92);padding:10px;text-align:center;
                    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
                    filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0} 
/* my code end*/