【ついでにこっちも】はてな公式の注目記事モジュールを例のスタイルに。

f:id:chiroru_27:20141119233204p:plain
(´・ω・｀) 一応全オプション対応。（サンプル画像は使い回し）

.hatena-urllist {
  position: relative;
  background: #ddd;
  width: 100%;
  overflow: hidden;
  margin-top: 1px;
  border-radius: 1px;
}
.hatena-urllist li {
  padding: 0;
  border-bottom: 0;
  line-height: 1.5;
  position: relative;
}
.hatena-urllist li a {
  text-decoration: none;
}

.urllist-item-inner.entries-access-ranking-item-inner {
height: 100%;
}

img.urllist-image.entries-access-ranking-image {
position: relative;
margin: 0;
}

a.urllist-title-link.entries-access-ranking-title-link.urllist-title.entries-access-ranking-title {
position: absolute;
top: 0%;
left: 0;
word-break: break-all;
overflow: hidden;
background: rgba(77, 77, 77, 0.42);
width: 90%;
height: 100%;
margin-top: 0;
padding: 5%;
color: rgba(255, 255, 255, 0.985);
font-size: 14px;
text-align: center;
text-shadow: -1px 1px rgba(0, 0, 0, 0.15);
-webkit-transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
}

a.urllist-title-link.entries-access-ranking-title-link.urllist-title.entries-access-ranking-title:hover {
  background: rgba(255, 255, 255, 0.05);
  color: transparent;
  text-shadow: none;
  padding-top: 100px;
  text-decoration: none;
}
.urllist-date-link.entries-access-ranking-date-link a time {
position: absolute;
bottom: 0;
right: 5px;
font-size: 10px;
color: white;
text-shadow: none;
}
a.bookmark-widget-counter img {
position: absolute;
left: 0px;
bottom: 0px;
}

.urllist-categories.entries-access-ranking-categories {
position: absolute;
bottom: 15px;
right: 0px;
font-size: 10px;
padding: 0;
margin: 0;
}

a.urllist-category-link.entries-access-ranking-category-link {
color: white;
text-shadow: none;
}