CSS note

CSS 3D Folding Animation

OnePageテーマ等で、hoverするとタイトル等を表示する仕組みをよく見るんですけど

この画像は、ワードプレスのメディアのページですが、丸印の部分で、すべて選択するチェックボックスが見えますが、管理画面などでは、何かを選択する場合ほとんど必ずこのようなチェックボックスがあります。

しかし、画像を中心に表示するようなポートフォリオテーマやワンページテーマでは、その多くがhoverしたら　タイトルや日付、簡単な概要文が表示されるという仕組みで動いています。

一つ一つ丹念に、ユーザーは画像をhoverするのでしょうか？

一括で、すべてをhover状態で表示できると便利なのではないかと考え

「一括でhover」 をCSSで作ってみました。

HTML

<input type="checkbox" id="hover-all" value="hover-all-show" />ぜんぶ　hover!!!
<div id="hoge"></div>
<div id="container1">
	<div class="parent1">
		<div class="parent2">
			<div class="parent3 centered f16">
				<!-- Content goes here -->Hello world
			</div>
		</div>
	</div>
</div>
<div id="container2">
	<div class="parent1">
		<div class="parent2">
			<div class="parent3 centered f16">
				<!-- Content goes here -->Hello world
			</div>
		</div>
	</div>
</div>

CSS

div:checked~ #hoge{
 color:red;
}