.gallery .gal { position: relative; background: #b2b2b2 }
.gallery .gal:hover .title { display: block }
.gallery .gal .title { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.gallery .gal .title span { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; font-weight: bold; font-size: 200%; color: #ffffff }
.gallery .gal:hover .title { display: table; background: rgba(0, 0, 0, 0.5) }

.gallery2 { border-left: 1px solid #eeeeee }
.gallery2 .gal { position: relative; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee }
.gallery2 .gal.t { border-top: 1px solid #eeeeee }
.gallery2 .gal img { filter: grayscale(100%) }
.gallery2 .gal .title { display: table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s; background-color: rgba(0, 0, 0, .5) }
.gallery2 .gal .title span { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; font-weight: bold; font-size: 150%; line-height: 1.5; color: #ffffff }
.gallery2 .gal:hover .title { display: table; opacity: 1; visibility: visible }
.gallery2 .gal:hover img { filter: grayscale(0) }

.gallery3 { border-left: 1px solid #eeeeee }
.gallery3 .gal { position: relative; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee }
.gallery3 .gal.t { border-top: 1px solid #eeeeee }
.gallery3 .gal .title { display: table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s; background-color: rgba(0, 0, 0, .5) }
.gallery3 .gal .title span { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; font-weight: bold; font-size: 150%; line-height: 1.5; color: #ffffff }
.gallery3 .gal:hover .title { display: table; opacity: 1; visibility: visible }