#pic1 {
  width:100%;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

#pic1 img{
width: inherit;
height: inherit;
}

#pic1:before {
  display: block;
  background-color: rgb(0, 0, 0);
  content: "";
  /*height: 100%;*/
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

#pic1:after {
  display: block;
  background-color: rgba(188, 188, 188, 0.8);
  font-family: 'Raleway', verdana;
  font-size:24px;
  font-weight: bold;
  color: #484747;
  content: attr(title);
  left: -100%;
  padding: /*2% 3%*/25% 3%;
  position: absolute;
  text-align: center;
  /*text-transform: uppercase;*/
  vertical-align:-50%;
  top:0%;
  width: 94%;
  height:100%;
  z-index: 3;
}

#pic1 img {
  border: none;
  display: block;
  z-index: 1;
}

#pic1:before,
#pic1:after,
#pic1 img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#pic1:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

#pic1:hover:before {
  opacity: 0.3;
}

#pic1:hover:after {
  left: 0;
}








#pic2 {
  width:271px;
  height:200px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;

}

#pic2 img{
width: inherit;
height: inherit;
}

#pic2:before {
  display: block;
  background-color: rgb(0, 0, 0);
  content: "";
  /*height: 100%;*/
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

#pic2:after {
  display: block;
  background-color: rgba(167, 255, 255, 0.8);
  font-family: sans-serif;
  font-weight: bold;
  font-size:1.5em;
  color: #ffffff;
  content: attr(title);
  left: -100%;
  padding: /*2% 3%*/25% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  vertical-align:-50%;
  top:0%;
  width: 94%;
  height:100%;
  z-index: 3;
}

#pic2 img {
  border: none;
  display: block;
  z-index: 1;
}

#pic2:before,
#pic2:after,
#pic2 img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#pic2:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

#pic2:hover:before {
  opacity: 0.3;
}

#pic2:hover:after {
  left: 0;
}








#pic3 {
  width:271px;
  height:200px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;

}

#pic3 img{
width: inherit;
height: inherit;
}

#pic3:before {
  display: block;
  background-color: rgb(0, 0, 0);
  content: "";
  /*height: 100%;*/
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

#pic3:after {
  display: block;
  background-color: rgba(102, 255, 255, 0.8);
  font-family: sans-serif;
  font-weight: bold;
  font-size:1.5em;
  color: #ffffff;
  content: attr(title);
  left: -100%;
  padding: /*2% 3%*/25% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  vertical-align:-50%;
  top:0%;
  width: 94%;
  height:100%;
  z-index: 3;
}

#pic3 img {
  border: none;
  display: block;
  z-index: 1;
}

#pic3:before,
#pic3:after,
#pic3 img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#pic3:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

#pic3:hover:before {
  opacity: 0.3;
}

#pic3:hover:after {
  left: 0;
}






#pic4 {
  width:271px;
  height:200px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;

}

#pic4 img{
width: inherit;
height: inherit;
}

#pic4:before {
  display: block;
  background-color: rgb(0, 0, 0);
  content: "";
  /*height: 100%;*/
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

#pic4:after {
  display: block;
  background-color: rgba(147, 192, 255, 0.8);
  font-family: sans-serif;
  font-weight: bold;
  font-size:1.5em;
  color: #ffffff;
  content: attr(title);
  left: -100%;
  padding: /*2% 3%*/25% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  vertical-align:-50%;
  top:0%;
  width: 94%;
  height:100%;
  z-index: 3;
}

#pic4 img {
  border: none;
  display: block;
  z-index: 1;
}

#pic4:before,
#pic4:after,
#pic4 img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#pic4:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

#pic4:hover:before {
  opacity: 0.3;
}

#pic4:hover:after {
  left: 0;
}








#pic5 {
  width:271px;
  height:200px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;

}

#pic5 img{
width: inherit;
height: inherit;
}

#pic5:before {
  display: block;
  background-color: rgb(0, 0, 0);
  content: "";
  /*height: 100%;*/
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

#pic5:after {
  display: block;
  background-color: rgba(153, 159, 250, 0.8);
  font-family: sans-serif;
  font-weight: bold;
  font-size:1.5em;
  color: #ffffff;
  content: attr(title);
  left: -100%;
  padding: /*2% 3%*/25% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  vertical-align:-50%;
  top:0%;
  width: 94%;
  height:100%;
  z-index: 3;
}

#pic5 img {
  border: none;
  display: block;
  z-index: 1;
}

#pic5:before,
#pic5:after,
#pic5 img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#pic5:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

#pic5:hover:before {
  opacity: 0.3;
}

#pic5:hover:after {
  left: 0;
}








#pic6 {
  width:271px;
  height:200px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;

}

#pic6 img{
width: inherit;
height: inherit;
}

#pic6:before {
  display: block;
  background-color: rgb(0, 0, 0);
  content: "";
  /*height: 100%;*/
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

#pic6:after {
  display: block;
  background-color: rgba(102, 102, 179, 0.8);
  font-family: sans-serif;
  font-weight: bold;
  font-size:1.5em;
  color: #ffffff;
  content: attr(title);
  left: -100%;
  padding: /*2% 3%*/25% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  vertical-align:-50%;
  top:0%;
  width: 94%;
  height:100%;
  z-index: 3;
}

#pic6 img {
  border: none;
  display: block;
  z-index: 1;
}

#pic6:before,
#pic6:after,
#pic6 img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#pic6:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

#pic6:hover:before {
  opacity: 0.3;
}

#pic6:hover:after {
  left: 0;
}