figure img { width: 110px; display: block; }
figure:nth-child(4) { clear: both; }



.image {  border:1px solid #E3E3E3;
    padding:4px; }


figure {
	display: block;
	position: relative;
	float: left;
	overflow: hidden;
	margin-top: 3px;
	margin-bottom: 2px;
	margin-left: 3px;
}
figcaption {
	position: absolute;
	background: rgba(0,0,0,0.55);
	color: white;
	opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: normal;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 8px;
	font-weight: bold;
	text-align: center;
	width: 110px;
}
figure:hover figcaption {
  opacity: 5;
}

figure:hover:before {
  opacity: 0;
}

.cap-left:before {  bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

.cap-right:before { bottom: 10px; right: 10px; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }

.cap-top:before { top: 10px; left: 10px; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }

.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }








figure2 img { width: 110px; display: block; }
figure:nth-child(4) { clear: both; }



.image2 {  border:1px solid #E3E3E3;
    padding:4px; }


figure2 {
	display: block;
	position: relative;
	float: left;
	overflow: hidden;
	margin-top: 3px;
	margin-bottom: 2px;
	margin-left: 3px;
}
figcaption2 {
	position: absolute;
	background: rgba(0,0,0,0.55);
	color: white;
	opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: normal;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 8px;
	font-weight: bold;
	text-align: center;
	width: 110px;
}
figure2:hover figcaption2 {
  opacity: 5;
}

figure2:hover:before {
  opacity: 0;
}

.cap-left2:before {  bottom: 10px; left: 10px; }
.cap-left2 figcaption2 { bottom: 0; left: -30%; }
.cap-left2:hover figcaption2 { left: 0; }

.cap-right2:before { bottom: 10px; right: 10px; }
.cap-right2 figcaption2 { bottom: 0; right: -30%; }
.cap-right2:hover figcaption2 { right: 0; }

.cap-top2:before { top: 10px; left: 10px; }
.cap-top2 figcaption2 { left: 0; top: -30%; }
.cap-top2:hover figcaption2 { top: 0; }

.cap-bot2:before { bottom: 10px; left: 10px; }
.cap-bot2 figcaption2 { left: 0; bottom: -30%;}
.cap-bot2:hover figcaption2 { bottom: 0; }