.pic {
   max-width: 384px;
   max-height: 384px;
   position: relative;
   overflow: hidden;

   -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-caption {
   cursor: default;
   position: absolute;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0);
   padding: 10px;
   text-align: center;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
   filter: alpha(opacity=1);
   -moz-opacity: 1;
   -khtml-opacity: 1;
   opacity: 1;
}
.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 {
   -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;
   background: rgba(235,194,48,0.65);
}
.bottom-to-top {
   top: 0%;
   left: 0;
}
.pic:hover .bottom-to-top {
   top: 0;
   left: 0;
}
@media screen and (max-width: 560px) {
   .pic {
      max-width: 384px;
      max-height: 384px;
      display: block;
      -webkit-animation: none;
      -moz-animation: none;
      -o-animation: none;
      -ms-animation: none;
      animation: none;
      margin: 10px auto;
   }
}