【CSS】カーソルを当てると要素が立体的に浮かばせる方法

本日はCSSで行間を設定する方法について書きたいと思います！！

■実装方法

①

.sample{

transition: .3s;

}

②

.sample:hover{

transform: translateY(-4px);

box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);

}

この実装をすると要素にカーソルを当てると指定した時間をかけて

①の状態から②に変化していきます。