【キャプションテスト】ホバーでアニメーション

キャプション画像のホバーアニメーション

CSSで変更。

<div class="●"></div>

で囲むことで反映可能。
●の部分には各class記述。

共通tag

<figure>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/marumimusicofficial/20210131/20210131121058.jpg" class="zoom" />
<figcaption>
<h3>Caption Title</h3>
<p>caption text here ...</p>
</figcaption>
</figure>

zoom用css

.zoom {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
figure:hover .zoom {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

表示

sass

.mask{
figure {
  position: relative;
  overflow: hidden;
  width: 300px;
  height:300px;
}
figcaption {
  text-align:center;
  color:white;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
  h3,p{color:white;}
  }
figure:hover figcaption {opacity: 1;}
}

表示2

sass

.topdown{
figure {
  position: relative;
  overflow: hidden;
  width: 300px;
  height:300px;
}
figcaption {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
  h3,p{color:white;}
}
figure:hover figcaption {
  top: 0;
  left: 0;
}
}