CSS3 tips - 画像にマウスを乗っけたら説明を表示する的なやつ
6 years ago
擬似要素と filter
を使えば CSS だけで出来ちゃいます.
Runstant Demo
画像にマウスを載せるとグレーアウトして説明が表示されます.
Code
HTML
<body>
<h1>Images</h1>
<div class='item' alt='スポーツA'>
<img src='http://lorempixel.com/200/150/sports/1' />
</div>
<div class='item' alt='スポーツB'>
<img src='http://lorempixel.com/200/150/sports/2' />
</div>
<div class='item' alt='スポーツc'>
<img src='http://lorempixel.com/200/150/sports/3' />
</div>
</body>
CSS
.item {
display: inline-block;
position: relative;
}
.item:hover img {
transition: 500ms;
display: block;
-webkit-filter: grayscale(100%) brightness(50%);
}
.item:hover:after {
content: attr(alt);
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tips
擬似要素で属性のテキストを表示
擬似要素内で content: attr(属性名)
とすることで対象の要素の属性を
テキストとして指定, 表示することができます.
今回は alt 属性を指定しているので
content: attr(alt);
としています.
ちょっと面倒な点として img は閉じタグがないので img 自体に :after, :before は使えません. なので親要素に alt を設定してあげる必要があります.
天地中央揃え
top
, left
と transform
の組み合わせです.
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
注意点として, 親用を基準として中央に表示したいので,
親要素に position: relative
, 自身に position: absolute
を指定しています.
CSS3 の filter プロパティで簡単フィルター
あまり知られてないようですが, CSS3(webkitのみ?) で filter
というプロパティが追加されています.
これを使えば簡単に画像にフィルタを書けることができます.
指定できるフィルタには色々と種類があるのですが今回は grayscale
と brightness
を指定しています.
-webkit-filter: grayscale(100%) brightness(50%);
ダミー画像は lorempixel で♪
それっぽいダミー画像は lorempixel を使うと楽に用意できますよ!