CSSでコンテンツにマウスオーバーするとアイコンが表示するTwitterのあれ

Google Chrome、Firefoxで確認しております。

html

iconは透過pngで作成しています。

html

 
	<div class="section">
		<ul class="icon">
			<li><a href="#"><img src="img/icon01.png" width="16" height="18" /></a></li>
			<li><a href="#"><img src="img/icon02.png" width="18" height="18" /></a></li>
			<li><a href="#"><img src="img/icon03.png" width="19" height="18" /></a></li>
		</ul>
		<h2>TITLE 01</h2>
		<p>マウスオーバーでアイコンを表示するあれです。</p>
	</div>
	

css

リストを「opacity: 0」で透明にしておいて、「div:hover」で「0.5」に、さらに「li:hover」で「1」にしてるだけですね。

css

 
	div.section {
		width: 500px;
		background: #FFFFFF;
		padding: 15px;
		margin-bottom: 2px;
	}
	div.section:hover {
		background: #eee;
	}
	div.section p {
		clear: both;
	}
	div.section ul.icon {
		list-style: none;
		float: right;
	}
	div.section ul.icon li {
		display: inline;
		margin-left: 5px;
	}
	div.section ul.icon li {
		opacity: 0;
	}
	div.section:hover ul.icon li {
		opacity: 0.5;
	}
	div.section ul.icon li:hover {
		opacity: 1;
	}