ホバーアクションを作成したので、メモとして残します。

丸

ホバーすると丸が上に動き、影のようなものが出来ます。

HTML

<div class="circle-container">
    <div class="circle"></div>
    <div class="circle-shadow"></div>
</div>

CSS

.circle-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.circle-container .circle {
  position: absolute;
  margin: 0 auto;
  margin-top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 0 8px gray;
  background-color: aqua;
  transition: all 1s ease;
}

.circle-container .circle-shadow {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #888888;
  transition: all 1s ease;
}

.circle-container:hover {
  .circle {
    margin-top: -100px;
  }
  .circle-shadow {
    width: 50%;
    height: 10%;
    background-color: #EEEEEE;
    box-shadow: 0 0 8px #EEEEEE;
  }
}

結果

文字

ホバーすると文字が上に動きます。

HTML

<span class="string float">あいうえお</span>

CSS

.string {
  color: #000000;
  font-size: 4rem;
  letter-spacing: 0.3rem;
}

.string.float {
  position: relative;
  transition: all 1s ease;
}

.string.float::after {
  color: #000000;
  content: 'あいうえお';
  position: absolute;
  left: 0;
  margin-top: 0;
  transition: all 1s ease;
}

.string.float:hover {
  color: #EEEEEE;
}

.string.float:hover::after {
  color: #000000;
  margin-top: -100px;
}

結果

あいうえお

最後に

特にありません。