作成したサンプルは以下のURLを参照

https://codepen.io/dninja9902/pen/ZMVaRQ

画像とボタンでそれぞれに対して@keyframesによる

アニメーションで実現しました。

How to create?

HTMLファイルにて一つのdiv要素の中に画像とボタンを表示する要素を入れます。

<div id="sample">
  <img src="・・・" />
  <div><p>Button</p></div>
</div>

#sample {
  width: 660px;
  height: 480px;
  margin: 0 auto;  /* 表示位置を中央にするための小技 */
  overflow: hidden;
}

画像に対するスタイルを記載します。

こちらはマウスオンする前の初期状態として、

filter: brightness(100%);

を指定します。

#sample > img {
  filter: brightness(100%);
}

ボタンに対するスタイルですが、

こちらもマウスオンする前の初期状態を指定します。

#sample > div {
  position: relative;
  top: -180px;
}
p {
  margin: 0 auto;
  width: 100px;
  text-align: center;
  border: 2px solid black;
  padding: 15px;
  font-family: sans-serif;
  font-weight: bold;
  color: black;
}

次はマウスオンした場合のスタイルを定義します。

画像の場合は少しズームインし、かつ明度を暗くします。

ボタンも同様のタイミングで、文字の色を黒から白にします。

これをアニメーションで実現するので

@Keyframes

を利用しています。

#sampleの要素をマウスオンすると、

画像とボタンはそれぞれimageHover, imageBtnHover

というanimation-nameで定義された内容に従い、

animation-duration: 1s;

animation-timing-function: liner;

の定義により、1秒間の等速でアニメーションします。

また、アニメーション後の状態も維持するために、

animation-fill-mode:both;

を使用しています。

#sample:hover img {
  animation-name: imageHover;
  animation-duration: 1s;
  animation-timing-function: liner;
  animation-fill-mode:both;
}
#sample:hover p {
  animation-name: imageBtnHover;
  animation-duration: 1s;
  animation-timing-function: liner;
  animation-fill-mode:both;
}

@keyframes imageHover {
    100% {
        transform: scale(1.2);
        filter: brightness(70%);
        overflow: hidden;
    }
}

@keyframes imageBtnHover {
    100% {
        color: white;
        border-color: white;
    }
}