[CSS]WP用JS使わずに画像にマウスオーバーした時にキャプションを表示させるやつテスト

Reading Time: < 1 minute
  • js使いたくない
  • 言うほどの装飾はいらない
  • CSS3使っても問題ない

みたいな前提のとき用。

[html]

GOOGLE
うんこちんこまんこ
www.google.co.jp

[/html]

[css]
.set{
width:320px;
height:240px;
position:relative;
background:#ccc;
overflow:hidden;
}
.image{
}
.image img{
width:100%;
height:auto;
}
.status{
display:inline-block;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
overflow:hidden;
transition:all 0.5s;
}
.status:hover{
background:rgba(0,0,0,0.5);
}
.status a{
display:inline-block;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
text-indent:-999px;
z-index:1;
}

.status p{
color:#fff;
opacity:0;
position:absolute;
bottom:0;
}
.status:hover p{
margin:0;
padding:4px;
opacity:1;
}
.status p span{
color:#00C4F5;
border:1px solid #00C4F5;
padding:2px;
margin:2px;
display:inline-block;
}
[/css]

文字で説明すると、とりあえず画像が表示されてる。
それにカーソルを乗せると薄い黒でオーバーレイがかかって白地のテキストが表示される。
加えて画像全体がリンクになってる。

注意点とか
<a>はトリガー用でしかないので強制的に非表示にしてる。
複数<a>入れても一個しか適用されない。
表示されるテキストのところは、<p>以外も使って細分化したかったら、
それ用の親を作る必要がある。
作らなかったらブロックが重なる。
まあ下位置にしてる弊害だから、左上基準にしていいなら問題ないんだけどね。

シェアする

  • このエントリーをはてなブックマークに追加