opacity

実行結果

下の図です。

背景にかかわらず透明になります。

長方形が消えます

ログラム

HTML
<div class="box">div class="box"</div>

CSS
.box{
    width: 250px;
    height: 200px;
    background-color: #f88;
    transition: all 2s ease-in-out;
}
.box:hover{
  opacity: 0;
}

---

日本語では透明で見えなくなりますが,英語ではopacityオパシティ(可視率)が0つまり,無くなると見えなくなる意味になります。

他のやり方でも長方形が消えます

実行結果2

下の図です

小さくなって消えます。

プログラム2

HTML
<div class="box2">div class="box2"</div>

CSS
.box2{
    width: 250px;
    height: 200px;
    background-color: #f88;
    transition: all 2s ease-in-out;
}
.box2:hover{
  width: 0;
  height: 0;
}

こちらは,小さくなって無くなることで見えなくなります。