コピペで簡単!!最新記事のサムネイルにタイトルを重ねるカスタマイズ

最新記事のサムネイルにタイトルを重ねるカスタマイズについて書いてます。
なるべくコピペだけで出来るようにしてます。

このカスタマイズは

僕のメインブログの方では、サイドバーに最新記事などを設置し、それらをタブ化しています。
更に最新記事の画像サムネイルを大きく取り、その上にエントリータイトルを重ねて表示させています。
こんな感じです。

このカスタマイズについて備忘録を兼ねて紹介します。

画像重ね

CSSに以下の記述を追加するだけです。

/*********************************************************/
/*   画像重ね部                                          */
/*********************************************************/
.urllist-with-thumbnails li{
    position:relative;
}

.urllist-title-link {
	top:		30px;
	left: 0px;
	margin:		0;
	padding:	0;
	color:		#fff !important;
	background:	rgba(0,0,0,0.4); /* 帯の透明度 */
	font-size: 100%;
	position:	absolute; /* 絶対位置指定 */
    overflow: hidden;
}

.bookmark-widget-counter{
	top:		10px;
	left: 40px;
	background:	rgba(0,0,0,0.4); /* 帯の透明度 */
	position:	absolute; /* 絶対位置指定 */
}

.urllist-with-thumbnails li :hover a.urllist-title-link{
    visibility:hidden;
}

hover擬似要素を使って、マウスオン時にタイトルを消すようにしてますが、不要なら削除して下さい。
タイトルやブックマークの位置は、topやleft要素の数値を変えて変更できます。

chiroru.hatenablog.com
#ChiroruLabさんとか
hachibeechan.hateblo.jp
タオルケット体操さんの記事を参照してみたのですが、上手くいかなかったので、自分で解析してなんとか出来るようにしました。

hover時のアニメーションをもう少しなんとかしたいのですが、僕にはこれが限界w
今度挑戦しよう。