【BootstrapVueクールなデザイン】Cardコンポーネントの白黒画像にhoverすると色がつくCSSアニメーション実装

Vueバージョン確認

npm list vue

まずは上記コマンドでバージョンの確認

twinzlabo@0.1.0 /Users/twinzlabo

── vue@2.6.11

BootstrapVueの導入

BootstrapVueの導入がまだの方のために念のため導入方法書いときますね

とりあえずコピペして環境を整えてください

main.js

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

ターミナル

npm install vue bootstrap-vue bootstrap

以上でBootstrapVueの導入は完了です

Cardコンポーネントの白黒画像にhoverすると色がつくCSSアニメーション実装

すでに上の方で確認してもらったかと思いますが、

BootstrapVueのあまりしっくりこないカードコンポーネントをスタイル修正を行うことで

クールなデザインに編集していきましょう

デフォルトの上の画像をhoverしたら下の画像のように色がつくようにカスタマイズしていきます

この感じなかなかクールですよね

では早速コードをコピペしていきましょう

template

<template>
  <div>
    <b-card no-body class="overflow-hidden" style="max-width: 540px;margin: 0 auto">
      <b-row no-gutters>
        <b-col md="6">
          <b-card-img src="https://picsum.photos/400/400/?image=20" alt="Image" class="rounded-0"></b-card-img>
        </b-col>
        <b-col md="6">
          <b-card-body title="Horizontal Card">
            <b-card-text>
              This is a wider card with supporting text as a natural lead-in to additional content.
              This content is a little bit longer.
            </b-card-text>
          </b-card-body>
        </b-col>
      </b-row>
    </b-card>
  </div>
</template>

style

<style>
img {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 200ms ease-in;
  filter: grayscale(1) opacity(.8);
}

img:hover {
  filter: grayscale(0) opacity(1);
}

</style>

これだけです

いかがでしたでしょうか？

白黒表示の画像をhoverするとカラーになるってなかなかクールですよね

下の記事も参照してより応用的なデザインにも挑戦してみてください

以上です

参考