css

.blogthumb {
	float: left;
	width: 122px;
	height: 176px;
	margin: 0 14px 14px 14px;
	text-align: center;
}
.blogthumb .title {
	width: 122px;
	height: 14px;
	line-height: 14px;
	font-size: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.blogthumb .article {
	position: relative;
	width: 120px;
	height: 160px;
	border: solid 1px #e0e0e0;
	background: #fff;
	overflow: hidden;
}
.blogthumb .info {
	position: absolute;
	top: 65px;
	left: 10px;
	z-index: 1;
	width: 100px;
	color: #000;
}
.blogthumb .info .date {
	width: 100px;
	height: 20px;
	overflow: hidden;
	font: bold 14px/20px "Century Gothic", CenturyGothic, Futura, AppleGothic, sans-serif;
	letter-spacing: 1px;
}
.blogthumb .info .come {
	font: 10px/18px "Century Gothic", CenturyGothic, Futura, AppleGothic, sans-serif;
}
.blogthumb .blogimg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: block;
	width: 120px;
	height: 160px;
	-webkit-transition: 0.15s ease-in-out;
	   -moz-transition: 0.15s ease-in-out;
	     -o-transition: 0.15s ease-in-out;
	        transition: 0.15s ease-in-out;
}
.blogthumb .blogimg:hover {
	cursor: pointer;
	-ms-filter: "alpha(opacity=20)";
	    filter: alpha(opacity=20);
	    -moz-opacity: 0.20;
	         opacity: 0.20;
}

html

#foreach($tegaki in $tegakiList)
	<div class="blogthumb">
		<div class="article">
			<div class="info">
				<div class="date">$tegaki.uploadDateText</div>
				<div class="come"><b>$tegaki.commentNum</b> comments</div>
			</div>
#if($tegaki.tegakiId!=-1)
			<a href="../$user.userId/${tegaki.tegakiId}.html" class="blogimg" style="background: #f7f7f7 url($tegaki.fileNameMedium) no-repeat 50% 50%;"></a>
#else
			<div class="blogimg" style="background: #f7f7f7 url($tegaki.fileNameMedium) no-repeat 50% 50%;"></div>
#end
		</div>
		<div class="title">$tegaki.title</div>
	</div>
#end

補足
IE6まで、ほぼ同じように表示されている予定。IE6まで視野に入れてしまった自分の気が知れない。そのうちIE6,7を無視したソースに書き直すんだきっと多分。
少なくとも手ブロを使っている以上、IE6は度外視して良い気がしているこの頃