Linkwithinの画像つき項目にマウスポインターを乗せると項目を拡大する

2014年6月2日月曜日

Linkwithinの画像つき項目にマウスポインターを乗せると項目を拡大する

イントロダクション

関連記事を自動的に表示してくれる機能「Linkwithin」ですが、マウスポインターを各画像つき関連記事に乗せると、項目を拡大するようにしてみました。

コード

以下の CSS を追加しました。

.linkwithin_posts > a > div:hover {
width: 140px !important;
}
div.linkwithin_img_0 > div:hover {
background-size: cover !important;
width: 135px !important;
height: 135px !important;
}
.linkwithin_title:hover {
font-size:120% !important;
}

一つ目の .linkwithin_posts > a > div:hover では、マウスポインターを各画像つき関連記事に乗せたときに、各画像つき関連記事の幅を広げるように設定しています。
ブラウザのスタイルシートのデバッグ機能を使用して、ちょうどいいサイズを指定するとよいでしょう。
但し、ブラウザによって微妙な表示サイズのゆれが発生する場合があるので、あまりにもページ幅ギリギリな値は指定せず、少しの余裕を持たせるとよいでしょう。

二つ目の div.linkwithin_img_0 > div:hover では、マウスポインターを各画像つき関連記事の画像に乗せたときに、各画像つき関連記事の画像を拡大するように設定しています。
ブラウザのスタイルシートのデバッグ機能を使用して、画像サイズが見栄え良く表示されるサイズを指定するとよいでしょう。

三つ目の .linkwithin_title:hover では、マウスポインターを各画像つき関連記事のタイトルに乗せたときに、各画像つき関連記事のタイトルの文字サイズを拡大するように設定しています。
ブラウザのスタイルシートのデバッグ機能を使用して、タイトル文字列が見栄え良く表示されるサイズを指定するとよいでしょう。

なお、Linkwithin の場合、各要素に直接 style 属性が書き込まれているため、そのデフォルト値を上書きするために、すべてのスタイルシートの指定に !important を付与しています。