CSS3 tips - 画像にマウスを乗っけたら説明を表示する的なやつ

4 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 を使うと楽に用意できますよ!

http://lorempixel.com/

phi

phiaryjust a creator