画像にホバーしたらキャプションを上に重ねるCSSを書いてみた。

まずは画像にマウスをホバーさせてください。

a-blog cms使ってね

このように、マウスをホバーさせると、キャプションが出てくるCSSを書きました。
ソースは下のようになります。

.itemBox{
        display:inline-block;
	position:relative;
}
.itemBoxThumb{
        display:inline-block
	max-width: 100%;
	max-height: 100%;
}
.itemBoxCaption{
	background-color: rgba(0,0,0,0.8);
	color:#FFF;
	padding:10px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	opacity:0;
}
.itemBoxCaption:hover{
	opacity:1;
}

重ね方

重ねたい二つのオブジェクトをposition:relativeの親でくくってあげます。
次に、上に重ねたい、オブジェクトのpositionabsoluteにし、top:0left:0にします。
そうすると、親要素の左端にぴったりとオブジェクトが重なります。

hover時に表示させるようにする

要素自体にはopacity:0、透明度を0にして、隠しておき:hoverのときにopacity:1にすればよいです。このときに要素にtransitionなどを設定しておけば、ふわっと出現するようなエフェクトを作ることが出来ます。


Home
Next entry →